CSS problem with % margin in IE7

bitt3n

Senior member
Dec 27, 2004
202
0
76
I'm having a CSS problem with the margin property in IE7, specifically, in this page

http://mrkwiz.com/kwiz.php.html

I have a block on the right

#ads_container {
margin-left:600px;
}

that contains a block of ads with percentage margin

#ads {
padding-left:10px;
margin-left:33%;
border-left:1px solid #c9d7f1;
}

in FF/Chrome/Safari, this works fine, and as the window gets narrower, the ad block's left margin gets proportionally smaller, maintaining 33%. in IE7, the left margin starts out more like 66%, and then as I narrow the window, the ad content drops below the block.

Any advice on what I'm doing wrong would be greatly appreciated.
 

pubicenemy

Junior Member
Jun 11, 2009
12
0
0
Hmmm, I don't have ie on this machine so I can't see how it messes with the liquid layout.
I would try getting rid of #ad_containter, float #ads left, put a container div around #interface and #ads with a min-width of 820px or whatever your layout calls for. Then set the width and padding left on #ads as a % then it should vary with the width of the browser and settle at the min-width. I don't do liquid layouts very much so take my advice with a grain of salt.
 

bitt3n

Senior member
Dec 27, 2004
202
0
76
Originally posted by: pubicenemy
Hmmm, I don't have ie on this machine so I can't see how it messes with the liquid layout.
I would try getting rid of #ad_containter, float #ads left, put a container div around #interface and #ads with a min-width of 820px or whatever your layout calls for. Then set the width and padding left on #ads as a % then it should vary with the width of the browser and settle at the min-width. I don't do liquid layouts very much so take my advice with a grain of salt.

ok I got rid of #ads_container, and set #content (contains #interface and #ads) with minwidth of 800px (set background to red for visibility). I floated #ads right because I want them on the right of the #interface block (set background of #ads to blue for visibility). However for some reason, ads aren't floating right the way I expect.

http://mrkwiz.com/kwiz_2.php.html

Also, the % margin is now calculating as a % of the content div, so even if it were working right, I wouldn't get the same effect I was getting before (ie, the % margin was calculated as the % left over after the 600px left margin of #ads_container was accounted for). (I did get this effect by floating interface to the left (not in this example), and it looks much worse, because the ads go way too far from the content when the window widens.)

so I'm confused why float:right isn't working here, and also I'm concerned that even if it were, this would still not really solve the problem because the % margin is now calculated against the containing #content bock, rather than the (much smaller, after excluding margin) #ads_container block.