How to make three columns the same height?

Question

I\'ve viewed a dozen questions and answers to this issue, but there doesn\'t seem to be a single best answer for my situation.

I\'ve got a page (http://awesomealbums

Answer 1

Use a negative margin'hack'.

Give each column a margin-bottom of -9999 and a padding-bottom of 9999, and a height of 100%. I'm not sure if that is the right way round or not though. But the idea is that as one container expands, the others will also all expand due to the 100% height, the padding and margin work such that the margin is hidden outside the 100% height - Google for 'negative margin columns'.

Alterantivly use css-discuss to see all the industry recognised ways to build 3 column layouts, there are fluid examples - http://css-discuss.incutio.com/wiki/Three_Column_Layouts

Answer 2

I recently found the PERFECT solution. This does require the use of JavaScript / jQuery though. Basically, once the page is loaded, get the natural height of all of the divs. Choose the greatest natural height of each the divs. Set all of the divs to the that height.

<style>

body {
    font-size: .9em;
}
#ProductWrapper {
    width: 620px;   
    float: left;
}
.ProductDiv {
    width: 200px;
    float: left;
    background: rgb(240,240,240);
    margin: 1px;
    overflow: auto;
}

<div id="ProductWrapper">
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf</div>
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf </div>
<div class="ProductDiv" data-nat-height=''>asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf asdfasdfasdf </div>
</div>

<script type="text/javascript">
$(document).ready(function() {

// GET MAX NAT HEIGHT
var MaxHeight = 200;
$(".ProductDiv").each(function() {
    var Height = $(this).height();
    if (Height > MaxHeight) {
        MaxHeight = Height;  
    }
    $(this).attr("data-nat-height", Height);
});
// SET TO MAX HEIGHT
$(".ProductDiv").css("height", MaxHeight+"px");

});
</script>

Answer 3

One way (since your columns are fixed width anyway) is to use positioning (absolute to be exact). With this method you might change your css rules to the following:

#PagePad {
    background: white;
    position: relative;
}

#Column_1_3 {
    border-left: 1px #7D7D7D SOLID;
    width: 175px;
    text-align: right;
    padding: 10px;
    background: white;
}

#Column_2_3 {
    width: 540px;
    border-left: 1px #7D7D7D SOLID;
    border-right: 1px #7D7D7D SOLID;
    float: left;
    padding: 20px;
    background: white;
    margin: 0px;
    position: absolute;
    margin-left: 196px;
    bottom: 0px;
    top: 0px;
}

#Column_3_3 {
    width: 180px;
    border-right: 1px #7D7D7D SOLID;
    background: white;
    float: left;
    text-align: center;
    margin-left: 778px;
    position: absolute;
    top: 0px;
    bottom: 0px;
}

not sure how cross-browser it is though.

Answer 4

It's old school, but http://www.alistapart.com/articles/fauxcolumns/