From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Containing floats

Containing floats - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

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…

Contents