How do I right align div elements?
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;
.
CSS how to right align a div
You have left and right margin defined at auto right now so it's currently centered. You can set margin-left: auto;
for it to be right-aligned, and do the opposite for it to be left-aligned.
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin-left: auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
How to align element to right side of div box?
There are a few ways to accomplish this. One way is to add an automatic left margin to the tree:
margin-left: auto;
Another option would be to apply float: right;
to the tree, which may or may not result in the content flow you need.
And finally, my recommendation honestly would be to just use flexbox.
Margin Example
#foo { display: block; width: 500px; height: 500px; background: #5e5e5e;}
#tree { width: 100px; height: 30px; background: #000000; margin-left: auto;}
<div id="foo"> <div id="tree">Some Text here</div></div>
Left align and right align within div in Bootstrap
2021 Update...
Bootstrap 5 (beta)
For aligning within a flexbox div or row
...
ml-auto
is nowms-auto
mr-auto
is nowme-auto
For text align or floats..
text-left
is nowtext-start
text-right
is nowtext-end
float-left
is nowfloat-start
float-right
is nowfloat-end
Bootstrap 4+
pull-right
is nowfloat-right
text-right
is the same as 3.x, and works for inline elements- both
float-*
andtext-*
are responsive for different alignment at different widths (ie:float-sm-right
)
The flexbox utils (eg:justify-content-between
) can also be used for alignment:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
or, auto-margins (eg:ml-auto
) in any flexbox container (row,navbar,card,d-flex,etc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)
Bootstrap 3
Use the pull-right
class..
<div class="container">
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6"><span class="pull-right">$42</span></div>
</div>
</div>
Bootstrap 3 Demo
You can also use the text-right
class like this:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Bootstrap 3 Demo 2
Right align element in div class
I've removed the class pull-right
class from both the button
and the p
tag and added text-right
class to the div.container
.
I think this is what you need.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container text-right"> <p class="d-inline">Some text</p> <button type="button" class="btn btn-primary d-inline">+</button></div>
What is the best way to left align and right align two div tags?
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
align divs to the right side of the window in react
Try using this:
import React from "react";
import Card from "../Card/card";
import "../components/Overview.css";
const Overview = props => {
const measurment = [
{
title: "Last Blood Pressure",
value: "90/60",
subValue: "85 BPM",
date: "05/14/2020 04:12"
},
{
title: "Last Body Weight",
value: "154",
subValue: "13% Fat",
date: "05/14/2020 04:12"
},
{
title: "Last SpO2",
value: "98%",
subValue: "85 BPM",
date: "05/14/2020 04:12"
},
{
title: "Last Glucose",
value: "200",
subValue: " ",
date: "05/14/2020 04:12"
}
];
return(
<div style={{display: 'flex', justifyContent:'flex-end'}}>
{
measurment.map(measurment => {
return (
<div className="cards">
<Card
title={measurment.title}
value={measurment.value}
subValue={measurment.subValue}
date={measurment.date}
/>
</div>
);
})
}
</div>
)
};
export default Overview;
How to align 3 divs (left/center/right) inside another div?
With that CSS, put your divs like so (floats first):
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.
P.P.S. You often want last inside #container
this snippet: <div style="clear:both;"></div>
which will extend #container
vertically to contain both side floats instead of taking its height only from #center
and possibly allowing the sides to protrude out the bottom.
How to right align text inside a div for mutiline content using flexbox
Simply use text-align: right;
.wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
}
.col-md-9 {
flex: 0 0 65%;
max-width: 65%;
margin-left: 20px;
}
.item-first-col {
justify-content: flex-end;
border: 1px solid blue;
text-align: right;
}
.item-second-col {
border: 1px solid blue;
}
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
<div class="wrapper">
<div class="item-first-col col-md-3 d-flex">
One line text
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
<div class="item-first-col col-md-3 d-flex">
One line text
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
<div class="item-first-col col-md-3 d-flex" style="font-weight: bold;">
Here goes the text that fills two lines
</div>
<div class="item-second-col col-md-9 d-flex align-items-center">
Second column text
</div>
</div>
How can I right align a div with a table?
Here is a possible solution -
<div class="container">
<div class="mysortdiv">
<div>Sort</div>
<select>
<option value="1">First sort option</option>
<option value="2">Second sort option</option>
</select>
</div>
<table class="mytable">
<thead>
<tr>
<th>My first column</th>
<th>My second column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Something 1</td>
<td>Other thing 1</td>
</tr>
<tr>
<td>Something 2</td>
<td>Other thing 2</td>
</tr>
</tbody>
</table>
</div>
table,
th,
td {
border-collapse: collapse;
border: 1px solid black;
}
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mysortdiv {
margin-bottom: 10px;
margin-left: 110px;
}
Here is the pen -
https://codepen.io/orby32/pen/XWJOEJg
I removed all floats and instead wrapped the table and the select with container
div, which have display: flex;
.
Using floats considered today as worst practice for align elements.
Related Topics
Media Queries and Background Images
Translate X and Y Percentage Values Based on Elements Height and Width
How to Use Images in CSS with Webpack
In Outlook HTML Email, Float Does Not Work
Two CSS Files Defining Same Class
Horizontal Masonry Layout with Flexbox CSS Only
Css: Constrain a Table with Long Cell Contents to Page Width
Ml-Auto Is Not Pushing Navbar Links to the Right
Implement a CSS-Only Slideshow/Carousel with Next and Previous Buttons
How to Apply Custom Animation Effect @Keyframes in Mui
Does SCSS Support Inline Comments
Using "Display: Table-Cell" Is There a Way of Getting the "Colspan" Functionality