Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating equal-height columns

From: CSS: Page Layouts

Video: 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.

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 to use has actually been around for a very long time, at least in terms of the history of the web.

If you go out to positioniseverything.net and search for One True Layout, you'll find the origins of this particular technique. So what we are going to do is we are going to kind of do a little bit of a hack. We are going to force those two columns, the section and the aside, we are going to force them way, way, way down, and when I say way down, I mean further than anyone will ever scroll, by using bottom padding. But then what we are going to do is we are going to assign the exact same negative value to a margin bottom for it, which is going to take that wrapper and it's going to move that wrapper back up, just like a window shade would.

Then what we'll do is we'll clip off the content that overflows by using overflow hidden on the parent article. Trust me, it works great! Now if you're wondering how this looks in the browser right now, let me switch over to show you. You can see that we have a two-column layout here. Here's Aristotle and here is Socrates. And as I scroll down I can see that Socrates article is a little bit longer, based upon the width of the column. So I am going go back into my code and what I am going to do is scroll down into the styles where I have this little "styles go here," right on line 73 and I am going to go ahead and create a section, aside.

So it's going to be one of my selectors. And inside this, I am going to go ahead and set that really huge padding. So I am going to do be padding bottom, and trust me, this will not look natural at first. I am going to 1000 ems. That's a lot. Now underneath that I'm going to do a margin-bottom, and I am going to do -1000 ems. So again, we are pushing the bottom of both of those columns down by 1000 ems by using the padding, but then we're giving a negative margin of the exact same value to the bottom of it.

What that's going to do is the article that's wrapping around those two, it's going to basically window-shade, if you will, that article right back up. So in order to clip the content off at the bottom of the article, I am going to create another selector that's an article selector-- now this is our wrapper-- this is going around these two columns, and I am just going to go ahead and do overflow: hidden. If you want to really kind of see what's going on with this, you can apply a background color to it. In this case I am going to do just background rgb (219, 126, 64), because I want you to visualize the role that the article is having in this technique.

So if I save this, go back out to my layout, and test it, there's the background color of the article now, showing it's containing all of this. And check out what it's doing. It's going all the way down to the longest one, because remember, I'm using the same amount of padding on both of them and the same negative margin on both of them. It's coming back up to the very bottom of the tallest one, and then the article is just clipping it off. And that works fantastic. Now just like any other technique, there are going to certain constraints that you have with page layout and design.

So you're going to have certain times when this technique is not going to be effective, but nine times out of ten, it's an oldie but a goodie. It works, and it works really, really well. I am going to go back in and get rid of that background color, save the file, preview it again, and there is our two-column layout with equal-column heights. It doesn't matter which one is taller; they are always going to be exactly the same amount and they're always going to go all the way down to the bottom of the footer. Perfect! Now another technique that I want to show off is faux columns.

Now faux columns has been around for quite some time too. When faux columns first came out, essentially we used background images to handle this technique. It's very similar in the fact that we are going to have a wrapper around our two sections. So if I scroll down in my code, once again, we have that article around the section and around the aside. So the structure is exactly the same. So that article that we have wrapping around the two of them, if we apply a background color to that article, or if we give it a background graphic, one of the things that we could do was create a background graphic that tiles vertically that's a solid color and is only as wide as one of the columns.

And you could actually do two of them if you wanted to, and it would give the illusion that you had background colors for those columns, when in fact, the column height would stop at a certain point, but the background color for the wrapper would continue all the way to the bottom. Now if that's a little unclear, let me show you what I'm talking about. I am going to go ahead and preview this in my browser. You can see that we don't have any background colors on these guys at all right now. However, if I were to go in, and let's just say I go ahead and create an article and just put a background color on that article.

Let's say I go rgb and then (125, 125, 125). That is a gray. Now one of the things we need to do, remember, we are floating both of these columns, so we need to go ahead and contain those floats. And luckily I thought ahead and I applied clear fix to our styles, so I can go right down here in my code and on that article I can class = clearfix. So if I save this now and preview this in my browser, I can see that gray background.

Notice that it's going all the way down, because article is containing these floats and it's stretching all the way down. So in the past what we've done is instead of using a background color, we will use a background graphic, and that background graphic will tile vertically and be only as wide as we need to for the columns. You can do just one background graphic or you can do a background graphic that has two colors in it. So you can really be flexible with it. Now the downside of that of course is you're adding overhead. You're increasing a resource that needs be downloaded when the styles are loaded. What's nice about evolving CSS techniques is that now instead of using a background image, we can actually use a gradient to do the same thing for us.

Now most of time people think of gradients as going from one color to another sort of gradually and sort of fading in. But if you want, gradient color stops can be very abrupt. It can go directly from one color to another one without fading between the two of them. So that's how we can great some of these fake or faux columns, if you will, in our file. So I am going to go back into our code, and I've got an asset that's going to help us out a little bit here. If you go into the 03_09 folder and open up assets, you'll see the background.txt file.

Go ahead and just open that up. And what I've got is I've got some syntax in here that is a lot easier to copy and paste than it is to type. So I am going to highlight all of that text, just copy it, and then going into my faux columns, I am just going to paste it below my existing background. Just to give you a heads-up in terms of what's happening here, we are applying a linear gradient that's going from one color, it goes to 0, and then it goes to 62, changes to white, stays at 62, stays at white, goes to 65.

So at 62% and 65% we have white, and then it switches to another color. So we've got one color on the left-hand side, we've got a gap of white in the middle, and then it switches to another solid color on the other side. Now where am I getting these percentage breaks for the gradient? Well, it has everything to do with the width of these guys right here. So I'm calculating those based on the width of those. And this is a flexible layout, so here, we are calculating percentages rather than pixels. So if I save this, go back in, and preview it now, there are our two columns looking exactly the way it did before.

They look like they're equal heights, but we know they're not. This is actually just the background of our article wrapper that's stretching down all the way to the footer, because the float is being contained, and this is why it's called faux columns. Now this gradient syntax can be a little cumbersome, and I will be honest with you, this is a lightweight version of the syntax. This is not fully cross-browser compliant. I don't have anything in there for Internet Explorer. I don't have anything in there for Opera. So there's a lot more that you can do with the syntax. If you're curious about CSS gradients and you want to learn a little bit more about them and generate the syntax for them, I really recommend this site, The Ultimate CSS Gradient Generator, which I've actually recommended before. You can find this at colorzilla.com/gradient- editor, and if you're familiar with creating ingredients in, like, Photoshop, or Illustrator, it offers you a nice visual editor to create your gradient.

You can even come in and double-click the colors and choose whatever you want. And I am going to make a really horrible gradient, so bear with me on that. Then if you're happy with the gradient--who wouldn't be happy with that?-- you can someone just copy and paste the CSS that it generates for you. You can even go ahead and throw in support for Internet Explorer 9. So this is a really neat online tool that you can use to generate some pretty complex syntax, because the syntax for color gradients continues to evolve all the time. It's a handy tool to know about.

Now, I've just shown you two techniques here, and those are certainly not the only two ways to create columns of equal height. Designers are extremely creative people by their nature, and they continue to find new and very creative way as to tackle all these problems that are inherent to CSS. If you go out and research it, you're bound to find a bunch of articles discussing this very problem. Now I want to encourage you to take techniques like the ones I've shown you here as starting points. Go ahead and experiment with them, try out variations on them that might be better suited for your personal projects, and as you gain experience working with them, try approaching those problems in new ways, and go ahead and develop your own solutions.

Show transcript

This video is part of

Image for CSS: Page Layouts
CSS: Page Layouts

71 video lessons · 40589 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.