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 Chris Feltus
Chris Feltus
3,970 Points

Centering Columns Within Div

Trying to center the 3 columns on this codepen within its parent container, but having some issues with this codepen http://codepen.io/anon/pen/ByrzaP

.column {
    margin: 0 auto;
}

I tried using margin: 0 auto; to center it to its parent div, but not having much luck.

Any tips would be greatly appreciated.

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

just as a comment: be sure to check out the "Box Model" and "Basic Layout" modules from the CSS Basics Course here: http://teamtreehouse.com/library/css-basics

For a good solid foundation, it's important to have a good understanding of the box model and all the implications of different floats, display types, etc .

5 Answers

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Chris,

I was able to center the columns with this:

.column {
    // ...
    width: calc(33% - 10px);
    // ...
}

Since each column has a 10px margin on the left, they can't each take up 33% of the entire width. Subtracting 10px gives the desired result.

Satnam Singh
Satnam Singh
7,194 Points
Satnam Singh
Satnam Singh
7,194 Points

Hey Chris, as Robert provided you a much better code with only one line, but here's also one more solution, just to let you know :

#column-content {
    text-align: justify;
}

#column-content:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.column {
    width: 29%;
    margin: 10px 15px;
    display: inline-block;
    float: none;
    overflow: hidden;
}
Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

try this (yay for no floats):

#column-content {
    max-width: 960px;
    width: 75%;
    height: 450px;
    background-color: gray;
    margin: 0 auto;
  text-align: center;

}

.column {
    height: 250px;
  display: inline-block;
  width: 20%;
  margin: 10px 10px;
  background: #fff;
  vertical-align: top;
}
Chris Feltus
Chris Feltus
3,970 Points
Chris Feltus
Chris Feltus
3,970 Points

Thanks Robert Richey Thats the first time I have seen calc value for the width property. A quick questions about your solution though.

If I shrink the .column width to something very small such as 10%, without your code, it still does not center the columns with margin: 0 auto. Shouldn't there be enough space to accommodate them?

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

With the columns being floated left, they will not center unless their width + padding + margin takes up all 100%. Both Satnam and Andrew provide good solutions - here is another using flex box.

#column-content {
    max-width: 960px;   
    height: 450px;
    background-color: gray;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}

.column {   
    width: 30%;
    height: 250px;
    background-color: white;    
    margin-left: 10px;
    margin-top: 10px;
}
Chris Feltus
Chris Feltus
3,970 Points
Chris Feltus
Chris Feltus
3,970 Points

Robert Richey I am working through the CSS basics course you recommended here on treehouse. The result that they are achieving is confusing me, and seems contradictory to what you instructed regarding centering floated columns.

Within the secondary-content div they have two columns set to width 46.5%

.resorts,
.tips {
  width: 46.5%;
}

There appears to be no width, margins or padding for the left or right for the width of these elements. Yet they are able to center these floated columns. To center floated elements within a column, I was under the impression the sum total must be 100%. 46.5 + 46.5 = 93%.

Here is an image to illustrate that the div has no margins, padding, border (http://s23.postimg.org/oqmpk702j/div.png)

See codepen here, or alternatively you can open the project with treehouse work spaces from the CSS Basics course. Or feel free to check out the Code Pen.

EDIT: Long story short, looks like the exception in this case is one div is floated left, the other is floated right. If they were all floated left, then you run into the problem you mentioned.

Thank you for your time.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

That's an illusion of centering, but not what I'd call being 'centered' within the parent container. .tips and .resorts are being floated left and right, so they look really nice and centered, but they contact the left and right walls of their parent container - as a result, and because there is a 7% gap in the middle, it looks centered.

Flex box is an easy way to center elements within a parent container and not have to worry about adding up width, padding, border and margin.

Here is my Code Pen showing the two different examples. The top example is using flex box to center columns of text. While the bottom example is floating the columns left and right - with a bit of padding, it gives the appearance of centering.

Whatever effect you want to achieve, there are many different ways to go about it and I'm certainly no expert - I'm always learning something new or having to eat humble pie every now and then.

Best Regards