February 13, 2007
CSS Float - Video Tutorials
I know the basics of CSS (Cascading Style Sheets), but beyond that I sometimes need to bumble and fumble around looking for answers in books or online. One aspect of CSS that gives me some occasional problems (and I'm sure others as well) are floats.
When you float an element, it becomes a block-level element that can then be shifted to the left or right on the current line. A floated box is laid out according to the normal flow of elements, but it's then taken out of the flow and shifted to the left or right as far as the containing element will allow. Floats are a must for placing images in context, creating columns and other neat design ideas.
Here are some videos (.zip) narrated by Andy Clarke and Molly Holzchlag that will teach you the basics of floats.
Floating columns
Floating elements
Clearing floats
Floated web layout
Here are some really good articles (.pdf) on different aspects of floats as well:
Floating Theory Floating Images within Text Clearing Floats Float Tricks
