View Full Version : CSS float too far right in Ie7

08-04-2011, 11:25 AM

Displays fine in ie8, safari, chrome, ff, etc.

In ie7 the find us section is floating too far right and the
navigation is aligned to the left (the padding doesn't seem to be working)

CSS for Find Us Section
#layoutinfo {
width: 235px;
float: right;
border: 2px solid #fdea9d;
webkit-border-radius: 15px;
moz-border-radius: 15px;
border-radius: 15px;
margin-right: 10px;
PADDING: 10px;

Any Ideas,


08-04-2011, 11:46 AM
Try to adjust padding/margin

08-04-2011, 01:42 PM
First thing's first when trying to wrestle with fine-tuning CSS: validate your page (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.genesiskitchen.co.uk%2Ftestindex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1). There are currently 17 errors and 4 warnings. You have invalid ID names and ID's being used more than once in a page. Cleaning those up might not fix what you're seeing here, but it's still best to get your IE out of quirks mode.

Now for solving this specific issue, I'm guessing that this is a problem with margins/padding/overall width of your #layoutinfo not playing well with the width of your #rightcol div.

Your "box model" is out of whack. Your #layoutinfo div has a base width of 235px, plus 10px padding each side, plus 2px border each side, plus right margin of 10px. (235+10+10+2+2+10=269px of overall width, but #rightcol is only 250px wide). So you're trying to cram 269px of contents into a 250px box. IE7 is starting the content on the left edge of #rightcol and letting the overlapping width run out of the right-hand side of the container. Other browsers are giving more consideration to the right-hand margin you gave to #layoutinfo, and that's why the appearance is different across different browsers.

Just for fun, let's try increasing the width of the #rightcol div to accommodate

teststyle.css (line 139):

#rightcol {
}Let me know if that works.