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
loiclebunetel
4,184 PointsTable display
In this video : http://teamtreehouse.com/library/css-layout-techniques/display-modes/table-display
I don't understand why the main header set to a width of 100%, breaks on the right. Theorically it should take the full width of his container (the main wrapper with a width of 90% and centered)
The instructor focus on top/bottom margin collapse which can be fixed by just adding some padding on the primary col like he did earlier in a previous video when he talk about this issue. Then he goes on box-sizing property which seems to solve the issue of margin collapse and also this break on the right of the main header.
I also saw this issue can be fixed by adding an overflow: hidden on the main wrapper.
So i understand those solutions but not the behavior of the main header which breaks on the right.
Thanks for your help !
5 Answers
Sean T. Unwin
28,690 PointsIt bleeds to the right because that's the way elements grow - right and down. They begin with an x, y coordinate then expand right and down from that point.
Great questions by the way. :-)
Sean T. Unwin
28,690 PointsI understand that it can be frustrating and I am trying to help, but I failed to communicate earlier a key aspect of this.
It's because a width is set on the header. The test you did on .primary-content and on the <p> tags did not reproduce the issue because there is no width set on those. If you were to set a width on them, e.g. 80%, and add padding enough they will bleed out as well.
So to summarize, the header breaks out of the container when there is no box-sizing set because display: table keeps it as a block level element and it has a width set and the padding is added to the width which makes the total width greater than the container width.
I hope that helps to clear things up a little.
Sean T. Unwin
28,690 PointsWithout the box-sizing applied any padding or border applied is added to the overall size of the element which can result in a bleed outside of the container, if that element is treated as a block level element. This is the key point here -- display: table is treated as a block level element (if you set the header to display: block it will do the same thing) which is what is allowing the header to bleed outside of the container. Also, since margin: auto is applied to the container it is still centering itself, which is why it's not flush to the left and right sides. If have this file open and open your browser dev tools, uncheck the box-sizing to turn it off, then hover over the main-wrapper in the Inspector you can see that it is still 90% of the screen width and centered.
loiclebunetel
4,184 PointsThanks for your response. But without box-sizing on the primary column for example, if you add some padding at 50px, it does not flush, same for the p inside if you add 50px. And both primary column and its p inside are block elements. So yeah i understand centering a block element with margin left and right auto but this is not my question!
And also if you set the primary column to display table and add padding of 50px, it does not flush. So i still don't understand because if what you say is true, it would flush !
loiclebunetel
4,184 Pointsyep i appreciate. No the exclamation point is just here because i want to understand, not for you or to be agressive.
Ok it's true for the width.
But why it's bleeding out only on the right and not on the left ? the padding is yet the same ?