CSS Float causing content to be pushed down an HTML page - css

Question

I've created a very simple web page layout which can be seen here: http://s361608839.websitehome.co.uk/greengold/www/index.html as you can see, there seems to be a problem. The div #rightcol seems to be pushed down the page by the top div on the left (#leftcolbanner).
The CSS for #leftcolbanner is:
#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;
}
and #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;
}
The width of #leftcolbanner shouldn't be the issue why #rightcol is being pushed down. This would seem to be the only cause usually in my experience, but this time not so.
Can anyone see anything I cannot see causing this?
Many Thanks

Answer 1

Move #rightCol div above #leftCol div.

Answer 2

You can put the right column in first position of your 3 div containers and it should solve the problem.

Answer 3

<div id="main">
<div id="leftcolbanner">
<h2>Willkommen im Ausbildungsstall Green&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&GOLD GmbH</strong><br>
Dressurausbildungsstall<br>
Hauptstrasse 3<br>
4525 Balm b. Günsberg</p>
<p>green-gold#bluewin.ch</p>
<div id="rightcolline"></div>
<p><strong>Christian Pläge</strong><br>
[phone]</p>
<p><strong>Birgit Wientzek Pläge</strong><br>
[phone]<br>
Fax [phone]</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 4

I think you should add a div with float: left; and place there leftcolbanner and leftcol then it should work.

Answer 5

Better way is to put #leftcolbanner & #leftcol in one DIV. Then give float to them write like this:
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

You need to put these divs in a container div that accommodates the dimensions of its content. See in this jsfiddle, by putting them both in a div with a width:1000px, they line side by side.