Centre div unknown height

by Chris Ball

HTML

<div id="main">
    <div id="box">
        <div id="content">
            <h1 id="heading">HEADING</h1>

            <div id="left">
                <div id="leftContents">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget diam in mi facilisis condimentum. Nullam at arcu erat. Nullam elit libero, sodales sit amet pellentesque et.</p>
                </div>
            </div>
            <div id="button"></div>
        </div>
    </div>
</div>

CSS

*{
    padding:0;
    margin:0;
}
#main {
    position:absolute;
    top:0; left:0; right:0; bottom:0; background:lightblue;
    text-align:center;
    font-family:arial;
}
#box{
    position:absolute;
    top:15%; bottom:15%;
    background:white;
    left:50%;
}
#content{
    position:absolute;
    width:100%;
    top:50%;
    background:lightgrey;
}
#left{
    float:left;
    width:50%;
    overflow:auto;
    background:lightyellow;
    margin-bottom:60px;
}
#leftContents{
    /*clear:left;*/
}
#button{
    height:30px;
    background:red;
    clear:both;
    bottom:0;
    position:absolute;
    left:25%; right:25%;
}

JavaScript

function alignContent() {
    // Position containing box
    $box = $('#box');
    $box.css({
        'width': $box.height() + 'px',
        'margin-left': '-' + $box.height() / 2 + 'px'
    });
    // Size & position content area
    $content = $('#content');
    $content.css({
        'max-height': $box.height() - 72 + 'px',
        'margin-top': '-' + ($content.outerHeight() / 2) + 'px'
    });
    // Left panel sizing
    $left = $('#left');
    $max = ($box.height() - 72 - 60 - $('#heading').outerHeight());
    $left.css({
        'max-height': $max
    });
}
alignContent();

// Update when resized
$(window).resize(function () {
    alignContent();
});

$(window).load(function () {
    alignContent();
});