Finishing the First Page Buildout
Today we finished the HTML & CSS buildout that we started yesterday. We also reviewed the homework from last night.
Clearfix
The clearfix is a way of ensuring that the parent element of floated elements will expand vertically to enclose the floated elements.
To achieve this effect, the clearfix is implemented as a class applied to the parent element. The clearfix class uses pseudo-selectors to dynamically an invisible and zero dimensional element after the floated elements. Then the dynamic elements is given the property of “clear: both;” The clear property forces the parent to expand past the tallest floated element to accommodate the dynamic element.
The clearfix class:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}
To make the clearfix work, simply add it to the parent element wrapping the floated elements.
Inline, Inline-Block, Block
We also discussed the display property in much greater depth and the behaviors associated with each display type. To learn more about these properties, read this StackOverflow thread
Understanding Layout
Learn CSS Layout is a nifty little site useful for learning more about layout subjects. You can find information about layout all over the web, but this site is nicely organized and will help you better understand the terminology so that when you are looking up information, you are searching with the correct keywords.
