I'm having the problem of a right floated nested div breaking the "container" in Mozilla & Firefox. Anyone know of a fix for this? I've searched the internet for a few hours and can't find any specifics on this. Thanks!
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> * { padding: 0; margin: 0; } body { font: 11px "Courier New", Courier, mono; } #container { position: relative; margin: auto; width: 678px; padding: 10px 20px 10px 20px; text-align: left; background-color: #DBE3DB; border: 1px solid #333; } #rightCol { position: relative; float: right; width: 208px; height: inherit; margin: 0px 0px 10px 10px; padding: 0px; border: 1px solid #999; background-color: #C1CCB3; } .linkBox { position: relative; width: 90%; margin: 10px 0; background-color: #B0B8A0; border: 1px dashed #fff; } h1 { font-size: 16px; } </style> </head> <body> <div id="container"> <div id="rightCol"> <h1>div rightCol</h1> <p>#rightCol {<br>position: relative;<br>float: right;<br> width: 208px;<br> height: inherit;<br>margin: 0px 0px 10px 10px;<br>padding: 0px;<br>border: 1px solid #999;<br>}</p> <p>This box will extend below the Container Div in Firefox 1.0.3 and Mozilla 1.7.7. I haven't tested this on other browsers yet, but alas, there is no point if doesn't work on these. </p> </div> <h1>div Container</h1> <p>#container {<br>position: relative;<br>margin: auto;<br>width: 678px;<br>padding: 10px 20px 10px 20px;<br>text-align: left;<br>background-color: #DBE3DB;<br>border: 1px solid #333;<br>}</p> </div> </body> </html>
Bookmarks