Blogroll
Search

Create equal height columns using CSS

By admin | March 21, 2008

Here I am going to explain you the steps to create equal height columns without using image.

1. First of all you need to create a container and two columns inside the container. Here is the code:

<div id=”container”>

<div class=”leftcol”>This is column 1</div>

<div class=”rightcol”>This is column 2</div>

</div>

____________________________________________

Now make overflow of container hidden in style sheet and set margin and padding large enough than the column matter height.

CSS code:

_____________________________________________

#container {
width:340px;
height:auto;
overflow:hidden;
}

#container .leftcol {
float:left;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}

#container .rightcol {
float:right;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}

Above code will give you two equal height columns

Topics: CSS, Layout |

9 Responses to “Create equal height columns using CSS”

  1. Hamilton Says:
    March 22nd, 2008 at 4:03 am

    This is a (stupid?) question, but where do you place the content?

    Thanks!

  2. nicola Says:
    March 22nd, 2008 at 7:23 am

    It’s a good hack, thank you. Sometime you need more fantasy than technical knowledge…

    I’ve just tried it on Firefox2 and works properly, also with percentual widths. Hopefully it works also on IE.

  3. admin Says:
    March 22nd, 2008 at 12:22 pm

    Hamilton,
    You can place the content inside the divs: leftcol and rightcol.

    No question is stupid in this world.

  4. Saif Khan Says:
    March 24th, 2008 at 4:59 am

    Hi,

    Nice work, but it is not working properly in ie7, any idea how to coup up with that issue?

  5. admin Says:
    March 24th, 2008 at 1:22 pm

    Hi saif khan, I just checked it, it is working properly in Internet explorer 7. If you have any problem, please post your html and css code.

  6. Saif Khan Says:
    March 24th, 2008 at 6:02 pm

    I have solved the issue by designing the template from scratch, many thanks for that solution.

  7. Christian Magill Says:
    May 3rd, 2008 at 12:58 pm

    I love simple solutions to common web design challenges.

    Much appreciated!

  8. DocRocks Says:
    May 8th, 2008 at 3:17 pm

    I would love for this simple no-script and no-image solution to work but the code below doesn’t display properly in IE7. Is there a fix?
    Thanks

    Untitled Document

    This is column 1
    This is column 2

  9. Jason Says:
    August 15th, 2008 at 10:34 pm

    Thanks, this works well. Very appreciated.

Comments