Menu
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
851
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag. For example, widening the screen would cause more elements to fit on the top line, so they would jump up.
Because of this ability, floats have been used in web layouts time and time again. Since they weren't considered for full web layouts when they were built, using floats as such usually leads to layouts breaking unexpectedly, especially when it comes to responsive design, and that can get quite frustrating.
To clear a float, add the clear property to the element that needs to clear the float. This is usually the element after the floated element. The clear property can take the values of left , right , and both . Usually you'll want to use both.
The CSS float property controls the positioning and formatting of content on the page. Its most common use is to wrap text around images. However, you can use the float property to wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, iframes, and blockquotes.
Move #rightCol div above #leftCol div.
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
