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

Three-column floated layouts - CSS Tutorial

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

Start my 1-month free trial

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…

Contents