views:

654

answers:

6

Is there a way to have two columns, that match each other in height, without using table cells, fixed heights or Javascript?

Using a TABLE

<table>
    <tr>
        <td style="background:#F00;">
            This is a column
        </td>
        <td style="background:#FF0;">
            This is a column<br />
            That isn't the same<br />
            height at the other<br />
            yet the background<br />
            still works
        </td>
    </tr>
</table>

Using DIVs

<div style="float:left;background:#F00" >
    This is a column
</div>
<div style="float:left;background:#FF0" >
    This is a column<br />
    That isn't the same<br />
    height at the other<br />
    yet the background<br />
    still works
</div>
<div style="clear:both;" ></div>

The goal is to make both backgrounds extend the full height regardless of which side is taller.

Nesting one in the other wouldn't work because it doesn't guarantee both side are the correct height.

Unfortunately, the preview showed the working HTML, but the actual post stripped it out. You should be able to paste this into an HTML file and see what I mean.

+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
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
give me a minute then
Shahin
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
This is pretty close - but it doesn't seem to work in FireFox
Hugoware
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
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
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
+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
+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
Interesting stuff there man
Hugoware
A: 

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

Check this this article - it is very well written.

zeroDivisible