CSS two column layout using float resulting in unequal heights of columns

Question

HTML:

<div id="container">

    <div id="header">
        <h1>header</h1>
    </div>

    <div id="content">
        <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
        <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
    </div>

    <div id="navigation">
        <a href="#">Nav item</a>
        <a href="#">Nav item</a>
        <a href="#">Nav item</a>
        <a href="#">Nav item</a>
    </div>

    <div id="footer">
        Footer
    </div>

</div>

CSS:

html {
    font: 100% calibri;
}

#container {
    width: 960px;
    margin: 0 auto;
    background-color: pink;
}

#content {
    float:left;
    width: 660px;
    background-color: #ccc;
}

#navigation {
    float: right;
    width: 300px;
    background-color: #eee;
}

#navigation a {
    display: block;
    padding: 0 0 10px 0;
}

#footer {
    clear: both;
    background-color: #aaa;
    padding: 10px;
}

Result: https://jsfiddle.net/x83uw77a/

How do I get both columns to have equal heights?

This is a common question with [several solutions](https://css-tricks.com/fluid-width-equal-height-columns/), from [flex-box](http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback) to [displaying as a table](http://www.hongkiat.com/blog/css-equal-height/). Also check this out: http://stackoverflow.com/questions/2114757/css-equal-height-columns — benjarwar, Aug 12 '15 at 23:26

score 2 · Answer 1 · answered Aug 12 '15 at 23:25

One solution would be to use display:table, and display:table-cell, instead of floats.

Wrap your content in one 'container div':

<div id="content-holder">
        <div id="content">
            <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
            <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
        </div>

        <div id="navigation">
            <a href="#">Nav item</a>
            <a href="#">Nav item</a>
            <a href="#">Nav item</a>
            <a href="#">Nav item</a>
        </div>
        </div>

CSS:

#content-holder {
display:table;
}
#content {
    display:table-cell;
    width: 660px;
    background-color: #ccc;
}

#navigation {
    display:table-cell;
    width: 300px;
    background-color: #eee;
}

Demo: https://jsfiddle.net/x83uw77a/1/

Thanks but I need to be as backward compatible as possible with older browsers that do not support the `display: table-cell` option. — Robert, Aug 12 '15 at 23:33
@RobertRocha, is javascript/jquery allowed? This is my last idea, in case that you need to support IE7 and IE8... — sinisake, Aug 12 '15 at 23:36
Yes JavaScript is allowed. The website will be used with old computers running Windows XP that use either IE 6 or IE 7. — Robert, Aug 12 '15 at 23:37
I do like your solution though and will keep it in mind when developing for mode modern systems. — Robert, Aug 12 '15 at 23:38
Well, thanks...regarding js/jquery workaround for older browsers: https://www.google.com/search?q=jquery+equal+heights&ie=utf-8&oe=utf-8&gws_rd=cr&ei=TtnLVbvJEsL2aIavsbAF I am sure you will find something here... — sinisake, Aug 12 '15 at 23:42
Or simple one-liner: $('#navigation').css('height',$('#content').height()+'px'); https://jsfiddle.net/x83uw77a/2/ (The plugins,a s far as i know, calculate height of tallest div in block, and set the rest accordingly, but you can use this, i guess...) — sinisake, Aug 12 '15 at 23:46

Hatora · Answer 2 · 2015-08-13T00:14:46.017

0

My solution would be defining both the #navigation and the #content height with a reasonable size, per se height: 960px; and giving them both overflow: auto; which will create a scroll bar when the child elements overflow past the parent. Good IE 4 support.

CSS:

    #navigation,
    #content {
        overflow: auto; /* IE 4 SUPPORT */
        height: 960px;
    }

edited Aug 13 '15 at 00:14

answered Aug 13 '15 at 00:08

Hatora

76
5

score 0 · Answer 3 · answered Aug 13 '15 at 01:24

If you can make it work, you can use position: absolute and height: 100%

#navigation {
    position: absolute;
    right: 0;
    height: 100%;
    width: 300px;
    background-color: #eee;
}
#content {
    position: absolute;
    left: 0;
    height: 100%;
    width: 660px;
    background-color: #ccc;
}

You can then change the height of #container accordingly to get the height you want for both columns!

If you don't need the backwards compatibility, try using flex-box as a more modern approach!

CSS two column layout using float resulting in unequal heights of columns

3 Answers3