CSS Float powoduje przesuwanie zawartości strony HTML

Question

Stworzyłem bardzo prosty układ strony internetowej, który można zobaczyć tutaj: http://s361608839.websitehome.co.uk/greengold/www/index.html jak widać, wydaje się, że istnieje problem. Element div #rightcol wydaje się być przesunięty w dół strony o najwyższy element div po lewej stronie (#leftcolbanner).

CSS dla #leftcolbanner jest:

#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; 
} 

i #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; 
} 

Szerokość #leftcolbanner nie powinno być problemem, dlaczego #rightcol jest popychany w dół. Wydaje mi się, że to jedyna przyczyna, która zwykle wynika z mojego doświadczenia, ale tym razem nie tak.

Czy ktoś może zobaczyć coś, czego nie widzę, powodując to?

Wiele Dzięki

Answer 1

Move #rightCol div powyżej #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

Możesz umieścić prawą kolumnę na pierwszej pozycji swoich 3 pojemników div, co powinno rozwiązać problem.

Answer 4

Myślę, że powinieneś dodać div z float: left; i umieścić tam leftcolbanner i leftcol, to powinno działać.

Answer 5

Lepszym sposobem jest umieszczenie #leftcolbanner & #leftcol w jednym DIV. Następnie dać pływaka do nich napisać tak:

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

trzeba umieścić te div w div kontenera, który mieści wymiary jego treści . Zobacz w tym jsfiddle, umieszczając je oba w div z width:1000px, oni line obok siebie.