Float de CSS provocando que el contenido se presione hacia abajo una página HTML

Question

He creado un diseño de página web muy simple que se puede ver aquí: http://s361608839.websitehome.co.uk/greengold/www/index.html como puede ver, parece que hay un problema. El div #rightcol parece ser empujado hacia abajo de la página por el div superior a la izquierda (#leftcolbanner).

El CSS para #leftcolbanner es:

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

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

El ancho de #leftcolbanner no debe ser el problema #rightcol por qué está siendo empujado hacia abajo. Esta parece ser la única causa por lo general en mi experiencia, pero esta vez no es así.

¿Alguien puede ver algo que no puedo ver que cause esto?

Muchas Gracias

Answer 1

Mover #rightCol div por encima de #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

Puede colocar la columna derecha en la primera posición de sus 3 contenedores div y debería resolver el problema.

Answer 4

Creo que deberías agregar un div con flotador: izquierda; y coloque allí leftcolbanner y leftcol, entonces debería funcionar.

Answer 5

Mejor manera es poner #leftcolbanner & #leftcol en un DIV. A continuación, dar flotador para ellos escribir así:

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

Es necesario poner estos divs en un div contenedor que acomoda las dimensiones de su contenido . Consulte en este jsfiddle, poniéndolos a ambos en un div con un width:1000px, alineados uno al lado del otro.