Question

I having a hard time with my CSS min-height, I have two divs and they are side by said, if one of them expands, I would like the other to expand http://www.willruppelglass.com/

As you can see the leftSideBar stops expanding at its min-height and the content div is expanded past its min-height.

CSS

.leftSideBar{
    background:url(../images/leftSide.jpg) repeat-y;
    float:left;
    margin-top: -49px;
    min-height: 591px;
}
.contentWrapper{
    background-color:#ebebeb;
    width:1411px;
    margin:0 auto;
    position:relative;
}
.content{
    background:#FFF;
    width: 1100px;
    margin:0 auto;
    position:relative;
    min-height: 591px;
}

HTML

<div class="contentWrapper">
    <div class="content">
        <div class="leftSideBar">
            <img src="images/leftSideTop.jpg" width="170" height="78" border="0" />
        </div><!--leftSideBar-->
    </div><!--content-->
</div><!--contentWrapper-->

Answer 1

The reason this is happening is because the content in the content div is pushing past the minimum height but the left nav not actually having content has no reason to get bigger.

My suggestion, even though it is not strictly CSS, I would use a simple piece of jQuery (because I noticed you are already using it) that will dynamically adjust the CSS property of the left div to match the right div. The jQuery version is here:

var div_height = $("#content").height();
$(".leftsidebar").css("height":div_height);

Please note that I have used an ID on the content that doesn’t exist in your existing code so you will need to assign an ID to that div to work.

I hope this helps.