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

Unlock the full course today

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

Two-column floated layouts

Two-column floated layouts - CSS Tutorial

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

Start my 1-month free trial

Two-column floated layouts

Now that we've had some time to become familiar with the concepts of using floats and how they affect surrounding elements, I want to show you a few common approaches for creating float-based layouts. I'm going to start with the most common layout, and that is a two-column layout. Now we're going to be doing three different versions of exactly the same layout. So the same HTML structure, we're just going to do it three different ways. And that's really to show you guys that often it's a personal choice as to how you control the layouts. Okay, so we have three files that I've opened up here. If you look in the 03_06 directory, you're going to find 2col_v1, 2col_v2, and 2col_v3. Just go ahead and open all three of them up, so that you know the structure of the page that we're going to be working with here. Very simple structure, just some basic building blocks if you will. Inside the body we have a header, which is typical. We have a section, which is going to be our first column. We…

Contents