CSSポジションとすべては私がここに別のdivの下のdivを得ることができない私はいくつかの理由のために私のCSSに問題がある

Question

こんにちはを重ねている山車は私のコード

ライブデモadamlisik.co.uk/kantor2ある これは、テーブルがすべてのものは、時間を変更し

.left { 
float:left; 
} 
.right { 
float:right;} 

がタブの上にあるエーテル側に移動させるために、CSSで次の2つのクラスを追加するとすぐに今の私のcss

body{ 
margin: 0; 
font-family: Arial, sans-serif; 
font-size: 13px; 
line-height: 18px; 
padding:0px; 
background-image:url('../images/bg-body.jpg'); 
background-attachment:fixed; 
} 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin: 0; 
    font-family: inherit; 
    font-weight: bold; 
    color: inherit; 
    } 
h1 { 
    font-size: 30px; 
    line-height: 36px; 
} 
h2 { 
    font-size: 24px; 
    line-height: 36px; 
} 
h3 { 
    line-height: 27px; 
    font-size: 18px; 
} 
h4, 
    h5, 
h6 { 
    line-height: 18px; 
} 
h4 { 
    font-size: 14px; 
} 
h5 { 
    font-size: 12px; 
} 
h6 { 
    font-size: 11px; 
    color: #999999; 
    text-transform: uppercase; 
} 
p { 
    margin: 0 0 9px; 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    line-height: 18px; 
    color:#0d0d0d; 
} 
hr{ border:none; height:1px; margin:30px 0; background-color:#CCCCCC; color:#CCCCCC; } 
    .hr{ border-top:1px solid #CCCCCC; margin:30px 0; } 
.container { 
width:1000px; 
margin: auto; 
padding:0px; 
background:#FFF; 
} 
.header { 
position:relative; 
z-index:10; 
background-image:url('../images/logo1.jpg'); 
background-repeat:no-repeat; 
background-position:left bottom; 
height:100px; 
width:950px; 
margin:auto; 

} 

ul#dropdown-menu{ float:right; list-style:none; margin-bottom:0px; padding-top:70px; }  
ul#dropdown-menu li{ float: left; } 
ul#dropdown-menu li a{ display: block; padding:7px 21px 5px 0; font-size:16px; text-transform:none; color:#252525;text-decoration:none; font-weight:bold; }    
ul#dropdown-menu li a:hover{ color:#FF0000;} 
ul#dropdown-menu li.hover a{ text-decoration:underline; }   
ul#dropdown-menu li.current > a{ color: #FF0000; }        
ul#dropdown-menu li .sub-menu li a{ color:#252525; }        
ul#dropdown-menu li.last > a{ padding-right:0px; } 

.money { 
    margin-top:20px; 
    background-image:url('../images/hr-bg.jpg'); 
    height:120px 
} 

.content { 
padding:25px 50px 10px; 
} 

.footer { 
padding:5px 15px 10px; 
} 

ですlesとすべてのフッタースタイルが機能しない

これを修正する方法はありますか？

Answer 1

要素にfloatプロパティを追加すると、その要素は通常のフローから削除されます。そのため、フローはまだフローになっていますが、フローティング要素がその子要素ではないように動作します。あなたはこのように解決することができます

：

.hr{ clear: both; } 

はそれがお役に立てば幸いです。

Answer 2

.contentの両方の子要素が浮いているので、これは、たまたまそれが最初の2つだけ<p>（非浮かべ）の要素を（あなたはhr要素はちょうどあなたの下に座って見ることができるように含まれているようので、このコンテナの高さが振る舞います最後の段落）。

正確な高さを復元するには、親に、例えば、easyclearingのような何らかの非構造化クリアを適用するだけです。それとも、それは一方でにフッターを引き起こすことは、この

</div> 
<div style="clear:both;"></div> 
<div class="hr"></div> 
<div class="footer"> 

ようになるはずですクラス=「時間」のdiv

<div style="clear:both;"></div> 

前に、右下のdiv要素を追加

.content { 
    height: auto; overflow: hidden 
} 

Answer 3

を追加もう一度テーブルの下にいてください。