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.

Creating equal-height columns

Creating equal-height columns - CSS Tutorial

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

Start my 1-month free trial

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…

Contents