CSS Page Layouts: How to Contain Floats


show more Containing floats provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts show less
please wait ...

Containing floats

Earlier in this chapter, we saw one of the unfortunate side effects of floating elements. Remember, floated elements are removed from normal flow. That means that the height of their parent elements then collapse as if the floated elements inside them simply weren't there. This can cause a whole host of undesirable results, such as disappearing backgrounds and overlapping content. Now, fortunately, we have a few ways to prevent this from happening. So we have the containing.htm file open, and you can find that in the 03_03 folder.

If I scroll down just a little bit, you can see that we have a section. Inside that we have three divs, with the classes One, Two, and Three. If I were to preview just the default styles in a browser, you can see these elements are just stacking, normal document flow, one on top of each other: One, Two, and Three. Well, currently the height of the section is being controlled by the elements inside of it. That's actually quite common. Height is generally c...

Containing floats
Video duration: 7m 50s 8h 57m Beginner

Viewers:

Containing floats provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts

Subject:
Web
Software:
CSS
Author:
please wait ...