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.
Three-column floated layouts - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Three-column floated layouts
Let's take the techniques that we used in our last movie a little bit further by creating three-column layouts. Now, although the source order doesn't matter that much when creating two-column layouts, it does come into play a little bit when considering different techniques when building three-column layouts. So as with our two-column layouts, we're going to take a look at three different ways to create roughly the same layout. So I have three files open here, the 3col_v1.htm, 3col_v2.htm, and 3col_v3.htm, and you can find those in the 03_07 directory. Now, we're going to start with our version one first. Now, I just want to go down and show you the page structure really quickly here. So we have a header, just like we did last time, and then we have three sections. Notice that one just follows the other one, column1, column2, and column3, and then we have our footer where our copyright stuff goes. So just to show you what that looks like in normal document flow, we just have these…
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
-
-
-
-
-
Floating elements7m 50s
-
Clearing floats7m 28s
-
Containing floats7m 50s
-
Clearfix technique10m 38s
-
Floating inline elements14m 34s
-
Two-column floated layouts8m 17s
-
Three-column floated layouts11m 30s
-
Column height considerations7m 3s
-
Creating equal-height columns10m 42s
-
Floats: Lab5m 25s
-
Floats: Solution5m 21s
-
-
-
-
-
-
-