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.
Creating equal-height columns - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Creating equal-height columns
In our last movie we talked a little about the limitations of specifically setting a height on a column. Now we also talked about how difficult it is to stretch the height of a column to match its parent. There are times, however, when crating layouts of equal-column heights is desirable, and for those times, you're going to need to be creative in how you plan and structure your layouts. Let's take a look at a couple of methods that you can use to do that. So I have columns.htm open and columns_faux.htm open. So I am going to show you what's going on here in the columns one first. If I look at the structure page, I have a header, followed by an article. So I have a wrapper that's going around these different sections. I have one section that has a dialog from Aristotle in it, and then I have another section, or in aside in this case, that has a dialog from Socrates, or as Bill and Ted used to say, Socrates. Then at the very bottom, I have a footer. Cool! So the technique we are going…
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)
-
-
-
-
-
-