lugos Posted January 30, 2006 Share Posted January 30, 2006 Hello,I am trying to layout my webpage using divs instead of tables. The way I have it layed out now displays just like I want it to in Firefox, but does not display the same in IE. The only way I can get the boxes to display in their proper positions for IE is to shorten the width of either the pageBody or the newsDev div, or increasing the width of the centered div. But then that creates some space between the pageBody div and the newsDev div, which is not what I want. Am I missing a position or clear property? I've pasted my html and css code. Any help getting it to display in IE correctly would be greatly appreciated.html: <!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" xml:lang="en" lang="en"><head><title></title><link rel="stylesheet" href="div_layout_styles.css" type="text/css" /><script type="text/javascript"><!-- HIDE FROM INCOMPATIBLE BROWSERS// STOP HIDING FROM INCOMPATIBLE BROWSERS --></script><style type="text/css"></style></head><body><div id="container"> <div id="centered"> <div class="banner"> </div> <div class="newsDev"> </div> <div class="navigation"> </div> <div class="pageBody"> </div> <div class="footer"> </div> </div></div></body></html> css: body { border-collapse: collapse; font-family: verdana, arial, sans-serif; font-size: 11px; font-variant: small-caps;}#container { width: 100%; height: 700px; text-align: center;}#centered { width: 700px; text-align: left; margin: 10px auto 0 auto;}.banner { height: 140px; background-color: red; margin: 0;}.navigation { height: 20px; width: 500px; margin: 0; background-color: green;}.pageBody { height: 360px; width: 500px; margin: 0; background-color: blue;}.newsDev { width: 200px; height: 380px; margin: 0; background-color: yellow; float: right;}.footer { width: 700px; height: 125px; margin: 0; background-color: black; border-top: 1px solid white;} Thanks,lugos Link to comment Share on other sites More sharing options...
Err Posted February 1, 2006 Share Posted February 1, 2006 I never like working with DIV's I find tables a lot more easier, anywho, your problem was that the cells needed at float property for the navigation, body and footer in the CSS. Here you go: body {border-collapse: collapse;font-family: verdana, arial, sans-serif;font-size: 11px;font-variant: small-caps;}#container {width: 100%;height: 700px;text-align: center;}#centered {width: 700px;text-align: left;margin: 10px auto 0 auto;}.banner {height: 140px;background-color: red;margin: 0;}.navigation {height: 20px;width: 500px;margin: 0;background-color: green;float: left;}.pageBody {height: 360px;width: 500px;margin: 0;background-color: blue;float: left;}.newsDev {width: 200px;height: 380px;margin: 0;background-color: yellow;float: right;}.footer {width: 700px;height: 125px;margin: 0;background-color: black;border-top: 1px solid white;float: right;} Link to comment Share on other sites More sharing options...
lugos Posted February 2, 2006 Author Share Posted February 2, 2006 Awesome! Thanks RahXephon!! Just out of curiosity, why doesn't the banner div require a float property? Link to comment Share on other sites More sharing options...
Err Posted February 2, 2006 Share Posted February 2, 2006 Beucase it doesn't have a float property. If it did, the banner div will change position... and you're welcome. Link to comment Share on other sites More sharing options...
assessino Posted February 6, 2006 Share Posted February 6, 2006 interesting topic ...my problem is a bit like that, but then with tableshttp://sov.freefronthost.com/twilight.phpvs http://sov.freefronthost.com/battledome.phptotally same code for the top but different result in IE (FF works fine, what else do we expect).Should i change to divs to solve this ? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now