Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

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
39,199 Points
James Barnett
James Barnett
39,199 Points

Do you have any code so far?

9 Answers

Dan Gamble
Dan Gamble
4,122 Points

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
Jason Slabbers
Jason Slabbers
4,447 Points

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

Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

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.

Dan Gamble
Dan Gamble
4,122 Points
Dan Gamble
Dan Gamble
4,122 Points

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.

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

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."

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

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

Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points 
.column {
    background-color:lightgrey;
    border: solid 5px darkgrey;
    border-radius: 3px;
    height:200px;
    width:20%;}
Dan Gamble
Dan Gamble
4,122 Points
Dan Gamble
Dan Gamble
4,122 Points

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
PLUS
chien rong khor
Courses Plus Student 3,338 Points
chien rong khor
chien rong khor
Courses Plus 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;
}
Ryan Scharfer
PLUS
Ryan Scharfer
Courses Plus Student 12,537 Points
Ryan Scharfer
Ryan Scharfer
Courses Plus Student 12,537 Points

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!