ansaurus

Question

Even column heights without using a TABLE

Answer 1

+3 A:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

this is the kind of thing you want, give them both a height of 100% (using this css trick) and they'll stretch out to the height of the containing div!

edit: forgot to mention, put them in a container div!

Edit:

<html>
<head>
    <style>
        html, body
        {
            margin: 0;
            padding: 0;
            height: 100%; /* needed for container min-height */
        }
        #container
        {
            background-color: #333333;
            width: 500px;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne, #colTwo
        {
            width: 250px;
            float: left;
            height: auto !important; /* real browsers */
            height: 100%; /* IE6: treaded as min-height*/
            min-height: 100%; /* real browsers */
        }
        #colOne
        {
            background-color: #cccccc;
        }
        #colTwo
        {
            background-color: #f4f5f3;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="colOne">
            this is something</div>
        <div id="colTwo">
            this is also something</div>
        <div style="clear: both;">
        </div>
    </div>
</body>
</html>

Shahin 2008-12-02 21:53:52

I give. I have been trying and I can't make the columns be next to each other and be the same height. How can I do this?

MrChrister 2008-12-02 22:52:03

give me a minute then

Shahin 2008-12-02 23:08:51

This does not work for me in FireFox 2, but it does in IE6 -- what gives? I'm using it with the XHTML 1.0 Transitional doctype.

Zack Mulgrew 2008-12-03 08:53:52

This is pretty close - but it doesn't seem to work in FireFox

Hugoware 2008-12-03 16:51:53

Answer 2

A:

Theres a simple way of achieving this with clever HTML and CSS.

First the HTML:

<div id="container">
    <div id="col1">
        this is column 1
    </div>
    <div id="col2">
        this is column 2<br />
        it is obviously longer than the first column <br />
        YEP!
    </div>
</div>

Please note the lack of clear:both unsemantic div.

Now the CSS:

#container { background:#f0f; overflow:hidden; width:400px; }
#col1, #col2 { float:left; width:50%; }
#col2 { background:#ff0; }

The overflow hidden in the container rule makes sure that the container expands to the size of the contained floated divs (and gets rid of the unsematic clearing div that everyone loves so much).

The background of the container applies to the first column. The background of the col2 div applies only to the second div. This is what gives us the illusion that both divs are always the same height.

Simple, semantic solution in 3 lines of CSS. Enjoy

EDIT: Please comment on reason to vote down, otherwise I have to guess why my answer is wrong. In this case I had forgot to add the width property to the container so that it plays nice with IE6/7. Please check the revised CSS above.

Darko Z 2008-12-02 23:32:11

This works only if you know which column will be longer. It's a good solution, but I'm curious to find the way that covers in the event of unknown lengths.

Hugoware 2008-12-03 16:50:35

Answer 3

A:

display:inline-block

With a trick, it even works in IE:

<div><span>
    col1
</span></div>
<div><span>
    col2
</span></div>

div {display:inline;}
span {display:inline-block;}

porneL 2008-12-02 23:57:51

Answer 4

+2 A:

Just because nobody's said this, a lot of times people just fake the existence of even columns, by having a background image which tiles itself all the way to the bottom of the outer container.

This gives the appearance that the content is in two equal columns, even though one ends before the other.

AmbroseChapel 2008-12-03 04:01:51

Answer 5

+2 A:

Use the Faux Column CSS technique to solve this problem.

Given the following:

<div class="contentSidebarPair">
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

You can use the following styles:

/* sidebar.gif is simply a 200x1px image with the bgcolor of your sidebar.
   #FFF is the bgcolor of your content */
div.contentSidebarPair {
    background: #FFF url('sidebar.gif') repeat-y top left;
    width: 800px;
    margin: 0 auto; /* center */
    zoom: 1; /* For IE */
}

/* IE6 will not parse this but it doesn't need to */
div.contentSidebarPair:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

div.sidebar {
    float: left;
    width: 200px;
}

div.content {
    float: left;
    width: 600px;
}

There! Simple and effective. Absolutely zero JavaScript involved. And if you want to create more complex layouts (liquid layouts), you can adapt this technique using background-position. A tutorial is available here.

Andrew Moore 2009-06-26 01:42:07

Interesting stuff there man

Hugoware 2009-06-26 01:48:43

Answer 6

A:

Yes, it is possible - pure CSS and no hacks - equal height columns.

Check this this article - it is very well written.

zeroDivisible 2009-08-07 08:19:09

ansaurus

tags:

views:

answers:

Even column heights without using a TABLE

related questions