CSSフロートがコンテンツをHTMLページにプッシュダウンさせる

Question

私は非常にシンプルなウェブページレイアウトを作成しました。ここで見ることができます：http://s361608839.websitehome.co.uk/greengold/www/index.htmlご覧のとおり、問題があるようです。 div #rightcolは、左のトップdiv（#leftcolbanner）によってページの下にプッシュされているようです。

#leftcolbannerためのCSSは次のとおりです。

#leftcolbanner{ 
width: 707px; 
height: 266px; 
float: left; 
background: url(../images/banner_home.gif) no-repeat; 
margin: 20px 0 20px 20px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
border: 1px solid #e1dbce; 
} 

と#rightcol：

#rightcol{ 
width: 190px; 
background: #f4f2ec url(../images/bg_rightcol.gif) no-repeat right bottom; 
float: right; 
min-height: 550px; 
padding: 25px; 
-moz-border-radius-topleft: 0px; 
-moz-border-radius-topright: 5px; 
-moz-border-radius-bottomright: 5px; 
-moz-border-radius-bottomleft: 0px; 
-webkit-border-radius: 0px 5px 5px 0px; 
border-radius: 0px 5px 5px 0px; 
border-left: 1px solid #e1dbce; 
} 

#leftcolbannerの幅が#rightcolが押下されている理由の問題ではありません。これは私の経験では唯一の原因であるように思われますが、今回はそうではありません。

私はこれを引き起こしていると誰も見ることができますか？

多くのおかげ

Answer 1

#rightColのdiv #leftCol divの上で移動します。

Answer 2

<div id="main"> 
<div id="leftcolbanner"> 
<h2>Willkommen im Ausbildungsstall Green&amp;Gold</h2> 
<p>Ut ligula eros, consequat vitae varius eget, consequat ac neque. Vestibulum venenatis odio vitae erat tristique gravida in in elit. Duis molestie ante turpis.</p> 
</div> 
<div id="rightcol"> 
<h2>Kontact</h2> 
<p><strong>GREEN&amp;GOLD GmbH</strong><br> 
Dressurausbildungsstall<br> 
Hauptstrasse 3<br> 
4525 Balm b. Günsberg</p> 

<p><a href="mailto:green-gold@bluewin.ch" class="emailbutton">green-gold@bluewin.ch</a></p> 

<div id="rightcolline"></div> 

<p><strong>Christian Pläge</strong><br> 
+41 79 4 73 52 10</p> 

<p><strong>Birgit Wientzek Pläge</strong><br> 
+41 79 2 74 27 67<br> 
Fax +41 32 6 37 08 53</p> 

</div> 
<div id="leftcol"> 
<p>Curabitur gravida tristique felis, eu lobortis neque iaculis vitae. In lacus dui, feugiat eu iaculis sit amet, laoreet ut quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> 
<p>Nullam interdum, justo in porta rutrum, sem velit pulvinar purus, id scelerisque orci sem sit amet lacus. Proin posuere nunc quis sapien hendrerit sollicitudin sollicitudin dolor egestas. </p> 
<p>Sed nibh magna, imperdiet a ullamcorper vel, elementum at turpis. Quisque sed sem et tellus pretium pretium sed vel nulla. Suspendisse potenti. Vivamus vehicula ultrices enim, quis sagittis tortor dignissim ut. Nulla quis neque sed erat interdum porta. Donec iaculis libero eu justo volutpat volutpat condimentum metus rutrum. Quisque viverra mattis suscipit.</p> 
</div> 



</div> 

Answer 3

右の列を3つのdivコンテナの最初の位置に置くことができます。問題が解決するはずです。

Answer 4

私はdivをfloat：leftで追加するべきだと思います。そこにleftcolbannerとleftcolを置くとうまくいくはずです。

Answer 5

#leftcolbanner & #leftcolを1つのDIVに入れてください。あなたは、そのコンテンツの寸法を収容し、コンテナのdivにこれらのdivを配置する必要があり

HTML

<div class="left"> 
<div id="leftcolbanner"></div> 
<div id="leftcol"></div> 
</div> 
<div id="rightcol"></div> 

CSS

.left{float:left} 
#rightcol{float:right} 

Answer 6

：そして、彼らにfloatを与えることは、このように書きます。このjsfiddleをdivの中に入れてwidth:1000pxとすると、それらは並んで並んでいます。