From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Containing floats - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
(Locked)
Floating elements7m 50s
-
(Locked)
Clearing floats7m 28s
-
(Locked)
Containing floats7m 50s
-
(Locked)
Clearfix technique10m 38s
-
Floating inline elements14m 34s
-
(Locked)
Two-column floated layouts8m 17s
-
(Locked)
Three-column floated layouts11m 30s
-
Column height considerations7m 3s
-
(Locked)
Creating equal-height columns10m 42s
-
(Locked)
Floats: Lab5m 25s
-
Floats: Solution5m 21s
-
(Locked)
-
-
-
-
-
-