Equal height fluid columns with min height

Question

I'm trying to make two columns — sidebar and content.

Minimum height of each column should be height of viewport.
I don't know which column will be taller
Left column width should be 25%, or at least be changeable by media queries.

(black border is browser viewport) columns

I can't use faux columns, because I need color of columns to be dynamic. I can't use javascript solution to set height, because images with unknown size may appear in one of columns.

Does anyone knows how to do this? This thing is driving me crazy

score 5 · Accepted Answer · answered Apr 03 '12 at 13:04

You should be able to do this using the method outlined here - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

It's a technique for getting equal height columns without display: table, Javascript or images and has always worked well for me in all browsers.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

    <div id="container">
       <div>
            <p>Content 1</p>
       </div>
       <div class="col2">
            <p>Content 2</p>
            <p>Content 2</p>
            <p>Content 2</p>
            <p>Content 2</p>
       </div>
    </div>

You can adjust this example to fit the window easily enough. I hope this helps.

Live Example - http://jsfiddle.net/spacebeers/s8uLG/3/

Thank you, this is very helpful. But what about — "minimum height of each column should be height of viewport"? — Marvin3, Apr 03 '12 at 13:45
If you set your container (with the overflow hidden) to 100% you'll be fine - http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin — SpaceBeers, Apr 03 '12 at 13:48

Carrie Kendall · Answer 2 · 2012-04-03T14:00:20.733

2

you can use display:table-cell to maintain equal height. I am unsure if you wanted the combined width of the columns to be the size of the viewport (that is what it would seem like in the pictures). Here is an example

edited Apr 03 '12 at 14:00

answered Apr 03 '12 at 13:51

Carrie Kendall

11,124
5
61
81

Not going to downvote but you can do it just with CSS. Display table-cell isn't supported in older versions of IE btw. – SpaceBeers Apr 03 '12 at 13:53
`display: table-cell` is the perfect solution if you can drop support for IE7 and older. Here's the same thing without the JavaScript: http://jsfiddle.net/thirtydot/U2Ldb/4/. – thirtydot Apr 03 '12 at 13:57
@SpaceBeers not all solutions work in crappy browsers :P just trying to post another plausible solution. – Carrie Kendall Apr 03 '12 at 13:57
1

@thirtydot ah why did i miss that? well-played sir. – Carrie Kendall Apr 03 '12 at 13:59
I dream of a world without anything less than IE9. It's a fine solution if you can drop anything below IE8. – SpaceBeers Apr 03 '12 at 14:03
1

@SpaceBeers that's funny.. i dream of a world without IE ;] – Carrie Kendall Apr 03 '12 at 14:05

score 0 · Answer 3 · answered Apr 03 '12 at 13:13

Sometimes you have to compromise.

<style>html, body, #wrapper {min-height:100%}</style>
<!--[ie lt 7]><style>html, body, #wrapper {height:100%}</style><![endif]-->

<table id="wrapper">
  <tr>
    <td id="col1">

    </td>
    <td id="col2">

    </td>
  </tr>
</table>

Yes it's oldskool nasty but sometimes that's what you're left with until IE users drag themselves into the 21st century.

Equal height fluid columns with min height

3 Answers3