Mysticpixels

Living life…the cool way !

Equal height columns using CSS

with one comment

Dealing with table-less layouts can prove to be tedious, when it comes to equal height multi-column layouts. There are a lot of ways in which you can create equal height columns and they all work pretty well. But when it comes to semantic coding and standard approach, a solution that is purely CSS based is most preferred.

Here is a CSS based solution for creating equal height columns.

The idea here is extending the smaller column with an arbitrary value (higher than the longest column), and applying overflow:hidden to the parent container, so as to hide the overflown content of the column that we had extended. Moving more closer to the concept, let me explain the approach. Refer to the screenshot given below while reading the rest of this post.

Here i have used a two column layout as example. In this layout, the body part of the page, is having lot of content than the navigation column to the left. Assuming that relevant clearing methods are used to develop this layout, normally, the navigation column to the left will be having much shorter length than the content container (unless you give a specified height for each page to match the heights, which is not preferrable). What we would do is, to give the navigation container an arbitrary padding-bottom value and confusing the browser by giving a negative margin-bottom, of the same value, so that the browser assumes that the height of the container is only same as the content in the container, but still the height increases taking into account the padding and margin specified. Now having given the desired height to the navigation container, we now need to hide the xtra height of the container. For this, we give overflow:hidden, to the parent container that holds both of the containers (content container and the navigation container)

Sample Code:

CSS for the parent container: outerWrapper{overflow:hidden; border:solid 1px 000;}
CSS for navigation container: navWrapper{background-color:#BDF0FF;margin:0 0 -500px 0;padding:10 10 500px 10;}
CSS for contentcontainer:contentWrapper{background-color:#FFFFEC;padding:10px;}

Hope this is useful

Advertisements

Written by Ranjith

October 20, 2008 at 8:26 pm

Posted in UI

One Response

Subscribe to comments with RSS.

  1. in my previous post i used html tags and oops !! it renders..

    I used like this and its not working exactly…

    [html]
    [head]
    [css]
    .outerWrapper{overflow:hidden; border:solid 1px #000;}
    .navWrapper{background-color:#BDF0FF;margin:0 0 -500px 0;padding:10 10 500px 10;float:left;width:300px}
    .contentWrapper{background-color:#FFFFEC;padding:10px;}
    [/css]
    [/head]
    [body]
    [div class=”outerWrapper”]
    [div class=”navWrapper”]
    Hi again guys! As you can see I’m not dead :p
    I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though 🙂
    [/div]
    [div class=”contentWrapper”]
    Hi again guys! As you can see I’m not dead :p
    I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though 🙂 Hi again guys! As you can see I’m not dead :p
    I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though 🙂 Hi again guys! As you can see I’m not dead :p
    I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though 🙂 Hi again guys! As you can see I’m not dead :p
    I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though 🙂 Hi again guys! As you can see I’m not dead :p
    I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though 🙂 Hi again guys! As you can see I’m not dead :p
    I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though 🙂
    [/div]
    [/div]
    [/body]
    [/html]

    Shankar

    January 27, 2010 at 7:04 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: