2 divで動作するCSSの最小高さを得ることができない

Question

私のCSS min-heightで苦労しているのですが、私は2つのdivを持っていて、それらの1つが拡大すれば、展開するhttp://www.willruppelglass.com/

左のサイドバーが最小高さで拡大を停止し、コンテンツdivがその最小高さを超えて展開されています。

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

これが起こっている理由は、コンテンツのdiv内のコンテンツは、最小の高さを超えて推進しているが、実際にコンテンツを持っていないNAV残っているためである理由はありませんより大きくなる。

私が提案しているのは、厳密にはCSSではないが、正しいdivに一致するように左のdivのCSSプロパティを動的に調整するjQueryの単純な部分を使用する（私はあなたが既にそれを使用していることに気づいたから）。 jQueryのバージョンはここにある：

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

私はあなたが仕事をすることのdivにIDを割り当てる必要がありますので、既存のコードに存在しないコンテンツにIDを使用していることに注意してください。

こちらがお役に立てば幸いです。

Answer 2

あなたは最初の領域が左に浮いています。浮動小数点を使用するときはいつでも、さまざまなブラウザで異なる動作をすることができます。

divを互いに独立させたい場合は、入れ子にしないでください。さらに "表示"や "位置"などのCSSプロパティを使用して、自分自身で位置を制御することもできます。 divを互いにやりとりすることができれば、個々のdivを個別に制御することができます。