Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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?
–
–
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.
–
–
–
–
#container {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
background-color: lightyellow;
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
<div id="container">
<div></div>
<div></div>
<div></div>
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts,
flexbox is a modern (CSS3) technique with a broad range of options.
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
–
–
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/
–
<div style="float:left">First</div>
<div style="float:left">Second</div>
<div style="float:left">Third</div>
<div style="float:right">First</div>
<div style="float:right">Second</div>
<div style="float:right">Third</div>
</html>
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
<div style="width:100%">
<div style="float:left;width:50%">First</div>
<div style="float:left;width:50%">Second</div>
<div style="float:left;width:50%">Third</div>
</html>
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>
.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
<div class="container">
<div class="left">
<div class="center">
Center
<div class="right">
Right
.container {
display: flex;
flex-flow: row nowrap; /* Align on the same line */
justify-content: space-between; /* Equal margin between the child elements */
Output:
.container {
display: flex;
flex-flow: row nowrap; /* Align on the same line */
justify-content: space-between; /* Equal margin between the child elements */
/* For Presentation, not needed */
.container > div {
background: #5F85DB;
padding: 5px;
color: #fff;
font-weight: bold;
font-family: Tahoma;
<div class="container">
<div class="left">
<div class="center">
Center
<div class="right">
Right
#container {
display: grid; /* (1) a grid container */
grid-auto-flow:column; /* (2) column layout */
justify-content: space-between; /* (3) align the columns*/
background-color: lightyellow;
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
<div id="container">
<div></div>
<div></div>
<div></div>
–
I did another attempt to simplify this and achieve it without the necessity of a container.
<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>
.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
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>
#container {
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
height: 100px;
.col {
border: 1px solid #07f;
padding: 0;
CodePen
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>
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;
CopePen
If the left, center, and right DIVs have different widths, you can accomplish this as follows:
#container {
position: relative;
width: 100%;
text-align: center;
#left {
position: absolute;
left: 0px;
#right {
position: absolute;
right: 0px;
#center {
display: inline-block;
If your center DIV is text, you don't need the #center CSS.
</start-column>
<center-column>
<p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p>
</center-column>
<end-column>
<a href="#">End</a>
</end-column>
</layout>
Here are the changes that I had to make to the accepted answer when I did this with an image as the centre element:
Make sure the image is enclosed within a div (#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;
#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]]
–
–
