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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Posted by L S
L S
689 Points

What happens if your widths and margins don't add up to 100%?

If they add up to more, I would imagine they become one column again, is that right? But then they wouldn't fill up 100% of the one column (which is the same as if the original sum were less than 100%). What happens?

Also, in the video, the gutter space between the two columns is smaller than the margin space on the outside of the two columns. But if they were all set to be 2.5%, why did that happen?

2 Answers

ivomiranda
ivomiranda
30,286 Points

Why don't you try it in workspaces? Anyway, when you define a % of width or height it is relative to the parent element. This means that if the parent element has 1000 px width and you have 4 divs next to each other with 50% width they will be 500 px each, so in total they will be 2000 px and they can't be put next to each other inside the parent element so they will go to the next line.

The behaviour and the flow of an HTML document is very complex. This is why it's good to use a good grid system or frontend framework such as bootstrap or foundation. This way we know that accross most of the browsers the behaviour will be similar and that 12 columns will really be 12 columns. You don't have to worry about the sum adding up correctly. You just have to do a row and columns, then another row and more columns, and so on...

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points
Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

I have only begun CSS myself, but maybe you should look into the concept that Guil brings up on Box-sizing. Apparently this method is easier than using Maths to measure percentages of different widths of columns, paddings and gutters etc. Go to his set of videos titled 'The Box Model', then to the video titled 'Width, Height and Overflow Properties'.

Hoping this info is useful, Jane