I want to have 3 divs aligned inside a container div, something like this:
[[LEFT] [CENTER] [RIGHT]]
Container div is 100% wide (no set width), and center div should remain in center after resizing the container.
So I set:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
But it becomes:
[[LEFT] [CENTER] ]
[RIGHT]
Any tips?
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.
There are several tricks available for aligning the elements.
01. Using Table Trick
.container{_x000D_
display:table;_x000D_
}_x000D_
_x000D_
.left{_x000D_
background:green;_x000D_
display:table-cell;_x000D_
width:33.33vw;_x000D_
}_x000D_
_x000D_
.center{_x000D_
background:gold;_x000D_
display:table-cell;_x000D_
width:33.33vw;_x000D_
}_x000D_
_x000D_
.right{_x000D_
background:gray;_x000D_
display:table-cell;_x000D_
width:33.33vw;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="left">_x000D_
Left_x000D_
</div>_x000D_
<div class="center">_x000D_
Center_x000D_
</div>_x000D_
<div class="right">_x000D_
Right_x000D_
</div>_x000D_
</div>
_x000D_
02. Using Flex Trick
.container{_x000D_
display:flex;_x000D_
justify-content: center;_x000D_
align-items: center;_x000D_
}_x000D_
_x000D_
.left{_x000D_
background:green;_x000D_
width:33.33vw;_x000D_
}_x000D_
_x000D_
.center{_x000D_
background:gold;_x000D_
width:33.33vw;_x000D_
}_x000D_
_x000D_
.right{_x000D_
background:gray;_x000D_
width:33.33vw;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="left">_x000D_
Left_x000D_
</div>_x000D_
<div class="center">_x000D_
Center_x000D_
</div>_x000D_
<div class="right">_x000D_
Right_x000D_
</div>_x000D_
</div>
_x000D_
03. Using Float Trick
.left{_x000D_
background:green;_x000D_
width:100px;_x000D_
float:left;_x000D_
}_x000D_
_x000D_
.center{_x000D_
background:gold;_x000D_
width:100px;_x000D_
float:left;_x000D_
}_x000D_
_x000D_
.right{_x000D_
background:gray;_x000D_
width:100px;_x000D_
float:left;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="left">_x000D_
Left_x000D_
</div>_x000D_
<div class="center">_x000D_
Center_x000D_
</div>_x000D_
<div class="right">_x000D_
Right_x000D_
</div>_x000D_
</div>
_x000D_
I like my bars tight and dynamic. This is for CSS 3 & HTML 5
First, setting the Width to 100px is limiting. Don't do it.
Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0;
instead for that scenario.
You are using id's (hash #container
, #left
, etc) instead of classes (.container
, .left
, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead.
For HTML, no need to swap order for: left, center, & right. display: inline-block;
fixes this, returning your code to something cleaner and logically in order again.
Lastly, you need to clear the floats all up so that it doesn't mess with future <div>
. You do this with the clear: both;
To summarize:
HTML:
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
CSS:
.container {right: 0; text-align: center;}
.container .left, .container .center, .container .right { display: inline-block; }
.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }
Bonus point if using HAML and SASS ;)
HAML:
.container
.left
.center
.right
.clear
SASS:
.container {
right: 0;
text-align: center;
.left, .center, .right { display: inline-block; }
.left { float: left; }
.center { margin: 0 auto; }
.right { float: right; }
.clear { clear: both; }
}
This can be easily done using the CSS3 Flexbox, a feature which will be used in the future(When <IE9
is completely dead) by almost every browser.
Check the Browser Compatibility Table
HTML
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
CSS
.container {
display: flex;
flex-flow: row nowrap; /* Align on the same line */
justify-content: space-between; /* Equal margin between the child elements */
}
Output:
.container {_x000D_
display: flex;_x000D_
flex-flow: row nowrap; /* Align on the same line */_x000D_
justify-content: space-between; /* Equal margin between the child elements */_x000D_
}_x000D_
_x000D_
/* For Presentation, not needed */_x000D_
_x000D_
.container > div {_x000D_
background: #5F85DB;_x000D_
padding: 5px;_x000D_
color: #fff;_x000D_
font-weight: bold;_x000D_
font-family: Tahoma;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="left">_x000D_
Left_x000D_
</div>_x000D_
<div class="center">_x000D_
Center_x000D_
</div>_x000D_
<div class="right">_x000D_
Right_x000D_
</div>_x000D_
</div>
_x000D_
Float property is actually not used to align the text.
This property is used to add element to either right or left or center.
div > div { border: 1px solid black;}
_x000D_
<html>_x000D_
<div>_x000D_
<div style="float:left">First</div>_x000D_
<div style="float:left">Second</div>_x000D_
<div style="float:left">Third</div>_x000D_
_x000D_
<div style="float:right">First</div>_x000D_
<div style="float:right">Second</div>_x000D_
<div style="float:right">Third</div>_x000D_
</div>_x000D_
</html>
_x000D_
for float:left
output will be [First][second][Third]
for float:right
output will be [Third][Second][First]
That means float => left property will add your next element to left of previous one, Same case with right
Also you have to Consider the width of parent element, if the sum of widths of child elements exceed the width of parent element then the next element will be added at next line
<html>_x000D_
<div style="width:100%">_x000D_
<div style="float:left;width:50%">First</div>_x000D_
<div style="float:left;width:50%">Second</div>_x000D_
<div style="float:left;width:50%">Third</div>_x000D_
</div>_x000D_
</html>
_x000D_
[First] [Second]
[Third]
So you need to Consider All these aspect to get the perfect result
HTML:
<div id="container" class="blog-pager">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS:
#container{width:98%; }
#left{float:left;}
#center{text-align:center;}
#right{float:right;}
text-align:center;
gives perfect centre align.
The easiest solution is to crate a table with 3 columns and center that table.
html:
<div id="cont">
<table class="aa">
<tr>
<td>
<div id="left">
<h3 class="hh">Content1</h3>
</div>
</td>
<td>
<div id="center">
<h3 class="hh">Content2</h3>
</div>
</td>
<td>
<div id="right"><h3 class="hh">Content3</h3>
</div>
</td>
</tr>
</table>
</div>
css:
#cont
{
margin: 0px auto;
padding: 10px 10px;
}
#left
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
#center
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
#right
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
If you do not want to change your HTML structure you can also do by adding text-align: center;
to the wrapper element and a display: inline-block;
to the centered element.
#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:100px;
}
#center {
display: inline-block;
margin:0 auto;
width:100px;
}
#right {
float:right;
width:100px;
}
Live Demo: http://jsfiddle.net/CH9K8/
I did another attempt to simplify this and achieve it without the necessity of a container.
HTML
.box1 {
background-color: #ff0000;
width: 200px;
float: left;
}
.box2 {
background-color: #00ff00;
width: 200px;
float: right;
}
.box3 {
background-color: #0fffff;
width: 200px;
margin: 0 auto;
}
CSS
.box1 {
background-color: #ff0000;
width: 200px;
float: left;
}
.box2 {
background-color: #00ff00;
width: 200px;
float: right;
}
.box3 {
background-color: #0fffff;
width: 200px;
margin: 0 auto;
}
You can see it live at JSFiddle
Here are the changes that I had to make to the accepted answer when I did this with an image as the centre element:
#center
in this case). If it isn't, you'll have to set display
to block
, and it seems to centre relative to the space between the floated elements.Make sure to set the size of both the image and its container:
#center {
margin: 0 auto;
}
#center, #center > img {
width: 100px;
height: auto;
}
possible answer, if you want to keep the order of the html and not use flex.
HTML
<div class="a">
<div class="c">
the
</div>
<div class="c e">
jai ho
</div>
<div class="c d">
watsup
</div>
</div>
CSS
.a {
width: 500px;
margin: 0 auto;
border: 1px solid red;
position: relative;
display: table;
}
.c {
display: table-cell;
width:33%;
}
.d {
text-align: right;
}
.e {
position: absolute;
left: 50%;
display: inline;
width: auto;
transform: translateX(-50%);
}
Here is a CSS3 method for aligning divs horizontally inside another div.
#container {_x000D_
display: flex; /* establish flex container */_x000D_
flex-direction: row; /* default value; can be omitted */_x000D_
flex-wrap: nowrap; /* default value; can be omitted */_x000D_
justify-content: space-between; /* switched from default (flex-start, see below) */_x000D_
background-color: lightyellow;_x000D_
}_x000D_
#container > div {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
border: 2px dashed red;_x000D_
}
_x000D_
<div id="container">_x000D_
<div></div>_x000D_
<div></div>_x000D_
<div></div>_x000D_
</div>
_x000D_
The justify-content
property takes five values:
flex-start
(default)flex-end
center
space-between
space-around
In all cases, the three divs are on the same line. For a description of each value see: https://stackoverflow.com/a/33856609/3597276
Benefits of flexbox:
To learn more about flexbox visit:
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
With twitter bootstrap :
<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
You can try this:
Your html code like this:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
and your css code like this:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
so, it's output should be get like this:
[[LEFT] [CENTER] [RIGHT]]
You've done it correctly, you only need to clear your floats. Simply add
overflow: auto;
to your container class.
#warpcontainer {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
Using Bootstrap 3 I create 3 divs of equal width (in 12 column layout 4 columns for each div). This way you can keep your central zone centered even if left/right sections have different widths (if they don't overflow their columns' space).
HTML:
<div id="container">
<div id="left" class="col col-xs-4 text-left">Left</div>
<div id="center" class="col col-xs-4 text-center">Center</div>
<div id="right" class="col col-xs-4 text-right">Right</div>
</div>
CSS:
#container {
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
height: 100px;
}
.col {
border: 1px solid #07f;
padding: 0;
}
To create that structure without libraries I copied some rules from Bootstrap CSS.
HTML:
<div id="container">
<div id="left" class="col">Left</div>
<div id="center" class="col">Center</div>
<div id="right" class="col">Right</div>
</div>
CSS:
* {
box-sizing: border-box;
}
#container {
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
height: 100px;
}
.col {
float: left;
width: 33.33333333%;
border: 1px solid #07f;
padding: 0;
}
#left {
text-align: left;
}
#center {
text-align: center;
}
#right {
text-align: right;
}
.processList
text-align: center
li
.leftProcess
float: left
.centerProcess
float: none
display: inline-block
.rightProcess
float: right
html
ul.processList.clearfix
li.leftProcess
li.centerProcess
li.rightProcess
Source: Stackoverflow.com