...

View Full Version : Help with floating elemets wrapping in IE but not Firefox



zachoff
12-22-2005, 01:33 AM
Works like I want it to in Firefox, but I can't keep the right floating element from dropping under the left floating element when the width is below 500px in IE.. Any ideas?

BTW, the reason I'm doing these all inline is because it's an email footer and gmail doesn't recognize attached stylesheets or head styles. Anyway...


<html>
<head>
<title></title>
</head>
<body style="margin:0px;min-width:500px;">
<div id="container" style="width:100%;height:150px;background-image:url(images/bg_main.gif);background-repeat:repeat-x;">
<div id="left" style="float:left;width:250px;height:150px;background-image:url(images/leftimage.gif);background-repeat:no-repeat;">
<p style="font-family:arial,sans-serif;font-size:12px;font-weight:bold;padding-top:110px;padding-left:35px;"><a href="http://www.sharperagent.com" style="color:#000000;">www.sharperagent.com</a><br/><span style="font-family:arial,sans-serif;font-size:10px;color:#595959;padding-left:12px;"><a href="" style="color:#595959;">Free Trial</a> | <a href="" style="color:#595959;">View Demo</a><span></p>
</div>
<div id="right" style="float:right;width:250px;height:150px;background-image:url(images/rightimage.gif);background-repeat:no-repeat;">
<p style="font-family:arial,sans-serif;font-size:12px;font-weight:bold;padding-top:110px;padding-left:90px;"><a href="http://www.sharperagent.com" style="color:#000000;">www.lenderintouch.com</a><br/><span style="font-family:arial,sans-serif;font-size:10px;color:#595959;padding-left:17px;"><a href="" style="color:#595959;">Free Trial</a> | <a href="" style="color:#595959;">View Demo</a><span></p>
</div>
</div>
</body>
</html>

harbingerOTV
12-22-2005, 02:23 AM
<html>
<head>
<title></title>
</head>
<body style="margin:0px;min-width:500px;">
<div style="*border-left:500px solid #fff;*float:left;*position:relative;*z-index:1;">
<div style="*margin-left:-500px;*float:left;*position:relative;*z-index:2;">
<div id="container"

style="width:100%;height:150px;background-image:url(images/bg_main.gif);background-repeat:repe

at-x;">
<div id="left"

style="float:left;width:250px;height:150px;background-image:url(images/leftimage.gif);backgrou

nd-repeat:no-repeat;">
<p

style="font-family:arial,sans-serif;font-size:12px;font-weight:bold;padding-top:110px;padding-

left:35px;"><a href="http://www.sharperagent.com"

style="color:#000000;">www.sharperagent.com</a><br/><span

style="font-family:arial,sans-serif;font-size:10px;color:#595959;padding-left:12px;"><a

href="" style="color:#595959;">Free Trial</a> | <a href="" style="color:#595959;">View

Demo</a><span></p>
</div>
<div id="right"

style="float:right;width:250px;height:150px;background-image:url(images/rightimage.gif);backgr

ound-repeat:no-repeat;">
<p

style="font-family:arial,sans-serif;font-size:12px;font-weight:bold;padding-top:110px;padding-

left:90px;"><a href="http://www.sharperagent.com"

style="color:#000000;">www.lenderintouch.com</a><br/><span

style="font-family:arial,sans-serif;font-size:10px;color:#595959;padding-left:17px;"><a

href="" style="color:#595959;">Free Trial</a> | <a href="" style="color:#595959;">View

Demo</a><span></p>
</div>
</div>
</div>
</div>
</body>
</html>


www.cssplay.co.uk

it's hacky and won't validate but it works. Check the link above and see the whole shebang.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum