CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

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
204,019 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
4,783 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
4,783 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.