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 CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Posted by ejg
ejg
7,384 Points

Unable to use 100% for the addition of the column width and have them operating as floats at the same time

For both media queries, I am unable to have the total width of .primary + .secondary +.tertiary to equal 100%. If I do, the columns won't work as floats. In order for both queries to work, I had to decrease the width of the columns so that when added they come up to 90%.

I don't understand why this is happening

https://w.trhou.se/c7pqje2pre

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Typically, padding, borders, and margins are not counted in width calculations. If any are present, they will cause the element to take up more space than specified in the "width" setting. To compensate you must use a different box sizing model and/or allow a little extra space so things can fit.

Kirt Perez
Kirt Perez
7,374 Points

Steven Parker , do you think you can take another look at this question? I'm trying to figure out why the @ejg is having a problem. I'm fairly certain we were just taught that padding and borders have no affect as to how the columns will collapse, it only happens with margins? And if you wanted to use margins, that's when you would have to adjust the widths.

Looking at @ejg code, there is no margins on the columns yet altering the padding to 0 with the column widths set at 50% and the container at 100% in the code achieves the 2 column layout, but doesn't have any gutters. Applying padding gutters makes the columns collapse but why?

This was my attempt and adding any value to padding or borders to my columns will stay as 2 columns no matter what: https://w.trhou.se/ko8n79sn7c

Kirt Perez
Kirt Perez
7,374 Points

I decided to look back at this to practice column layouts with floats. The reason why his columns isn't utilizing it's full width is because at the very top of the style2.css page, the syntax for the comment "Base Element Style" is wrong. It is missing a forward slash before the first asterisks. Not too sure what the behavior this has caused but I'm assuming the file is reading the first css rule containing the box-sizing as a descendant selector with two asterisks separated by a space

  • * * { box-sizing: border-box; }

With fixing the comment, we are able to use 50% width values on our columns and add padding to have gutters in between the columns without the columns collapsing.