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)

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

Answer 1

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/