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.
Two-column floated layouts - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
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)
-
-
-
-
-
-