This Repo is about the secrets of structuring one HTML 5 Basic Layout!
Notes: it's about how framing the page, not polishing. We know, in production, all these framing Divs would be hidden with 0 margin and padding, and no border and background.
Please click here to see the online demo.
Up to now, there are THERE way to frame one basic HTML 5 Layout (if you have any other methods, please Fork me)!
- Left Floating Divs
- CSS 3 Box-Sizing
- CSS 3 Flex Box
We could find the Flex Box would be the best choice to make the structure of page layout.
.jpg)
In here, I summarize out all the key points of each method for your reference:
One of the MOST tricky things working with nested floats is how we solve the Collapsed Container.
In our code, you could find out we give out three solutions:
- MANUALLY DIV METHOD is to manually append one empty div at the end of the last children div :
- PSEODU DIV METHOD is use CSS Pseudo selector (:after) to automatically insert one empty div at the end of the last children div
- OVERFLOW METHOD is to set the Container's overflow attribute as 'auto' or 'hidden'
Details discussion please refer to CSS Guru's articles:
Another MOST tricky things working with nested floating Div components is when set the width and height properties of an element with CSS, we just set the width and height of the Content area.
In order to auto stretch all children Divs along with and as well, being inside their parent container, we have to consider all the possible sizes of the parent.
For example, as for the Header div, when the window's width is just 481px (this's the smallest possible width), in order to keep the Header div inside rather then overflow, it's content size must be smaller then 96%! That's for: 96% + 4% (=20px/481px) < 100%
Actually, all these framing Divs should be assigned as 0 margin and padding, and none border as well. In this case, we set them margin/padding and border just for we could see them.
Details discussion please refer to my post: Responsive Floating Divs.
When we use Div as Box-Sizing = border-box, the specified width and height (and min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height.In this case, we can set the child box's width = 100% and margin = 0, so as it can be always inside its container when stretching along with the window and its container.
I believe, this is just how this new CSS3 style making sense. While, you still have to assign it as one floating element.
The CSS 3 box-flex property specifies whether the child elements of a box is flexible or inflexible in size. Obviously, it's a solution for small nested Divs rather the framing the whole page layout. We don't need to use "float" property, and we just need to set the parent Div as flex box, and its children width.While we have to mention the width is still just the content width, no including margin and border.