CSS

How to horizontally align three divs within container div?

Hello. I am familiar with the grids of Bootstrap, Foundation, etc, but would like to teach myself how to align three columns (3 divs with height, width, background color) inside of a row using CSS. In my example each of the columns are about 20% the width of their container. The left column I float:left, the right column I float:right, but its the center one that gives me trouble. I have been able to force the center div in its proper spot by applying a huge margin-left to it, but there has to be a cleaner way to do this... Maybe not...

James Barnett
James Barnett
37,523 Points

Do you have any code so far?

9 Answers

You use the code

(```)[Choose the syntax style you want, html, css, etc.]
[Code you want to show]
(```)

Just replace the square brackets and everything between them with what you want to show. And just remove the curly braces, i added them so they wouldn't mess up the parsing of this post!

I played around with your JSFiddle: http://jsfiddle.net/rF4a5/1/

You basically delete the center column container, move the column_right div to be above the column_center div. You give them all the same width (33.3%) and remove the margin-top on the column_right.

But again this only works if you'd want to have 3 columns all be equal width. I would recommend you follow a bit more of a conventional route by doing:

<div class="row clearfix">
    <div class="span_4 column">
        1
    </div>
    <div class="span_4 column">
        2
    </div>
    <div class="span_4 column">
        3
    </div>
</div>
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.row {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}

.column {
    float: left;
    padding: 0 15px;
}

.span_4 {
    width: 33.3333%;
}

Then the only thing you will really need to change or add would be span_1 to span_12 giving them % widths (span_7 for example would be 100 / 12 * 7 = 58.3333 so span_7 would be width: 58.3333%).

Then you can use any combination of span_xx classes in a row that adds up to 12 to create as many columns as you like.

You could go to Boostrap (http://getbootstrap.com/css/#grid) or Foundation (http://foundation.zurb.com/docs/components/grid.html) and see how they do their grids so you could get a better understanding!

Hope this huge wall of text helped, let me know if there is anything you are still unclear on :)

Jason Slabbers
Jason Slabbers
4,447 Points

Have tried display:inline or inline-block in your css?

Hi Jason,

Yea, I tried that and used a lot of calculation to determine the perfect margins to make sure they were all evenly spaced out. I was thinking there was probably an easier way.

To do it specifically with 3 columns you can achieve it easily with your float left and right method

<div class="container">
    <div class="col1">
        1
    </div>
    <div class="col2">
        2
    </div>
    <div class="col3">
        3
    </div>
</div>
.container {
    margin:  30px auto;
    width: 1000px;
}

.container > div {
    width: 33%;
}
.col1 {
    float: left;
}
.col2 {
    float: right;
}
.col3 {
    margin: auto;
}

Certain rules you need to follow would be setting the same width on all the column divs, making sure it's the 2nd div that is floated right, it won't work if you float the 3rd column right and try and make the 2nd one centered.

I wouldn't really recommend you to use this method as it is specifically for 3 columns only i'd tend to follow the Foundation/Bootstrap method of floating left and assigning individual widths.

Hi, Don. Thanks! Here is my JSFilddle with the amateur code. ; ) http://jsfiddle.net/rscharfer/rF4a5/. As you see, I floated the third column and tried to center the second. So basically what you did is just take the first two columns out of the normal flow and the third column "moved up."

By the way, how do you display your code the way you did in the browser?

.column {
    background-color:lightgrey;
    border: solid 5px darkgrey;
    border-radius: 3px;
    height:200px;
    width:20%;}

No worries dude, that's a pretty good practice in the future, when you are just browsing sites try and do a bit of inspect element and see how others do it. It's a good way to learn :)

chien rong khor
PRO
chien rong khor
Pro Student 3,338 Points

you can use display:table-cell; for example

<div class="container">
    <div class="col1">
        1
    </div>
    <div class="col2">
        2
    </div>
    <div class="col3">
        3
    </div>
</div>
.container {
 display:table;
}
.col1, .col2, .col3 {
 display:table-cell;
}

Thanks Dan! Great idea about going to Bootstrap and Foundation to see exactly how they do their grids... I thanks for the assist regarding the Markdown!