CSS浮动导致内容向下推到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被按下的问题。在我的经验中，这似乎是唯一的原因，但这次不是这样

有人能看到我看不到的导致这一切的原因吗

非常感谢

移动

#rightCol

上方的div

#leftCol

div.

<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>

威尔科曼（Willkomen）澳大利亚成长之路高绿&；黄金
我们要爱神之舌，要活的品种，要活的品种。静脉前庭是精英阶层孕妇的生命。在turpis之前的Duis molestie

外界联系
绿色&；黄金股份有限公司
Dressuraustuldungsstall

豪普斯特拉斯3号

4525香脂b。昆斯伯格


Christian Pläge

+41794735210

Birgit Wientzek Pläge

+417927467

传真+41326370853

怀孕的库拉索蒂猫，欧盟的生命之路。在拉克斯酒后驾车，封建的欧盟成员坐在阿梅特，劳里特坐在码头上。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯

内杜姆教堂、红门的胡斯托教堂、pulvinar purus的维利特教堂、十字勋章教堂和阿梅特·拉库斯教堂。这是一个明智的选择

塞德·尼布·麦格纳，乌拉姆科佩尔王国，图尔皮斯的元素。这句话的意思是：“我的意思是说，我的大脑没有任何功能。”。潜力悬钩子。我们的交通工具是神圣的，我们的尊严是神圣的。这是一个非常重要的问题。Donec iaculis libero eu justo volatipat volatipat rutrum调味品。维韦拉·马蒂斯·苏西比特

您可以将右列放在3个div容器的第一个位置，这应该可以解决问题。

我认为您应该添加一个带有float:left的div；然后把leftcolbanner和leftcol放在那里，这样它就可以工作了。

更好的方法是把

#leftcolbanner

&

#leftcol

放在一个DIV中。然后给它们一个float，这样写：

HTML

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

---

您需要将这些div放在一个容器div中，该容器div容纳其内容的维度。从这里可以看出，通过将它们放在一个宽度为1000px的div中，它们并排排列。

这对我很有用。谢谢你能解释一下它是如何工作的吗？@JayantVarshney我知道这已经很晚了，我也不是浏览器开发专家，但这是我的猜测：浏览器从上到下读取它，然后在确定要渲染的布局时“保留”该项的空间。在#leftCol先于#rightCol的情况下，它会获得“最高优先级”，并且#leftCol会在为#rightCol保留空间之前使用整个区域，从而将#rightCol向下推。我认为一些浏览器会“返回”并正确显示它。[根据以前的经验]，我相信Firefox可以追溯到以前，但Chrome不会。将来，请将您的代码发布到JS Fiddle中，这样它也可以帮助其他人

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