How to Right Align Div Elements

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 now ms-auto
  • mr-auto is now me-auto

For text align or floats..

  • text-left is now text-start
  • text-right is now text-end
  • float-left is now float-start
  • float-right is now float-end

Bootstrap 4+

  • pull-right is now float-right
  • text-right is the same as 3.x, and works for inline elements
  • both float-* and text-* 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



Leave a reply



Submit