wemustdesign Posted October 15, 2008 Share Posted October 15, 2008 I have created a simple page with 2 columns. In IE it works fine. When content id added to either the right/ left column the #main wrapper expands to the same height. The problem is in Firefox, when content is added the left/ right divs just overlap the #main wrapper which cannot even be seen. You can see what I mean: http://www.the-photography-studio.co.uk/testpage.html The code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test page</title> <style type="text/css"> <!-- body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.7em; background-image:url(images/00-tile.gif); background-repeat:repeat; margin:0;} #wrapper{width:750px; margin:0; margin:auto; border:2px solid #504f4f;} #main{width:750px; background:#ffffff;} .mainleft{width:475px; border-right-color:#B7CFF9; border-right-style:dashed; border-right-width:1px; background-color:#CCCCCC; float:left} .mainright{width:274px;background-color:#003399; float:right;} } --> </style> </head> <body> <div id="wrapper"> <div id="main"> <div class="mainleft"> This<br /> is<br /> some<br /> sample<br /> text<br /> <br /> <br /> <br /> <br /> <br /> More text <br /> </div><!--maiinleft--> <div class="mainright"> d<br /> l<br /> l<br /> l<br /> </div> </div><!--main--> </div><!--wrapper--> </body> </html> Quote Link to comment Share on other sites More sharing options...
Maq Posted October 15, 2008 Share Posted October 15, 2008 Sorry, thought of something, posted it, and realized it wouldn't help Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted October 15, 2008 Share Posted October 15, 2008 just add: overflow:auto; to #wrapper Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 15, 2008 Share Posted October 15, 2008 i would also use percentages so its flexible nothing i hate more then a small website on my desktop 1440 is my low resolution that i use normally so a 750 seems like such a small thing <style type="text/css"> <!-- body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.7em; background-image:url(images/00-tile.gif); background-repeat:repeat; margin:0; } #wrapper{ width:750px; margin:0; margin:auto; border:2px solid #504f4f;} #main{ min-width:750px;width:90% background:#ffffff; } .mainleft{ width:66%; border-right-color:#B7CFF9; border-right-style:dashed; border-right-width:1px; background-color:#CCCCCC; float:left } .mainright{ width:31%; background-color:#003399; float:right;} } --> </style> Quote Link to comment Share on other sites More sharing options...
haku Posted October 15, 2008 Share Posted October 15, 2008 If your site looks fine in IE and broken in Firefox, it's because your code is wrong. IE is a non-standards compliant browser, while FF is a standards compliant browser. You will save yourself hours of headaches by coding first in FF and then afterwards fixing for IE. Quote Link to comment Share on other sites More sharing options...
Maq Posted October 16, 2008 Share Posted October 16, 2008 You probably already know this but here is the best standard: W3 Quote Link to comment Share on other sites More sharing options...
haku Posted October 16, 2008 Share Posted October 16, 2008 It's not just the best standard - it's the ONLY standard. Quote Link to comment Share on other sites More sharing options...
Maq Posted October 16, 2008 Share Posted October 16, 2008 It's not just the best standard - it's the ONLY standard. That's what I meant... :-\ Quote Link to comment Share on other sites More sharing options...
svivian Posted October 16, 2008 Share Posted October 16, 2008 If you used the strict doctype IE would display it properly as Firefox does. It's because floats are ignored by their parent element. Solution: add an element after the two floats that "clears" the floating. I think this should work: CSS: .clear { clear: both; height: 0; } HTML: <div class="clear"></div> Quote Link to comment Share on other sites More sharing options...
haku Posted October 17, 2008 Share Posted October 17, 2008 That adds extra unnecessary code. Skunkbad gave a solution already that doesn't require that extra code. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.