Fix: correct the width of main and footer #130
Conversation
It's done with changing the box model to border-box and a descendent selector for all direct childs of body (header, nav, main and footer).
|
I absolutely love your explanation. Makes it perfectly clear to me why you are doing this; thank you for taking the time to write it out :) |
|
I'm not sure border-box is the correct solution - it feels like a bit of a "cheat", and seems to have other effects besides the intended - section headings move, as does the OTTD banner EDIT: I have been reliably informed that I am wrong. Still, some extra padding in a few places looks to be required now... |
|
Some minor issues, most likely because of this PR (which I was only going to spot after merging this, so that is fine by me :D).
|
|
I'll correct the unwanted changes. |
|
You can leave the banner links - they're corrected in #132 |
The widths of the elements
mainandfooterwas broken (narrower thanheaderandnav) because the width was only776pxinstead the800pxofheaderandnavand in contrast toheaderandnavmainandfooterhave a padding for their content which is part of the width calculation.So the
mainandfooterboxes had (as first issue) not the same width asheaderandnavand had (as second issue) a resulting width of814pxwhen the rule for the box width saidwidth: 800px;because the7pxforpadding-leftandpadding-rightgot added to the800pxof the width-rule.The correction was done with changing the box model to border-box (which includes paddings and border-widths in the width calculation for the element). Additionally the width rule for the direct childs of body was moved to a descendent selector for all these elements.
Attention The descendent selector would select also every direct child of
bodythat will possibly introduced in the future.