jwk811 Posted February 24, 2010 Share Posted February 24, 2010 i have a 10px margin on the right when i put a left float and right float next to eachother. i tried putting 0 for padding and margin. all the sizes are fine. the content div has a 10px margin that wont go away. i tried negative px. then i went to make another with left and right float side by side and it made another margin so its looking like a mess. plz help. heres my only file <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css" media="screen"> body { text-align: center; margin: auto; } /* Heading */ #heading { text-align: center; width: 800px; } #heading-top { width: 800px; height: 10px; background: green; } #heading-left { float: left; width: 205px; height: 140px; background: orange; } #heading-right { float: right; width: 595px; height: 140px; background: brown; } #menu { width: 800px; height: 40px; background: blue; } #container { width: 800px; text-align: left; margin:0px; padding:0px; } #content { margin:0px; padding:0px; float: left; padding: 0px 10px 0px 0px; width: 600px; background: #151515 url(images/bg1.png) repeat-x left top; } #side { float: right; padding: 0px 10px 0px 10px; width: 160px; height: 600px; background: #BCAA7A; } #top-left { float: left; padding: 0px 10px 0px 0px; width: 360px; height: 300px; } #top-right { float: right; padding: 0px 10px 0px 10px; width: 220px; height: 300px; background: #4a0001; } #bottom-left { float: left; padding: 0px 10px 0px 0px; width: 220px; height: 300px; background: #8A1A18; } #bottom-right { float: right; padding: 0px 10px 0px 10px; width: 360px; height: 300px; } #featured { float:right; width:100px height:100px; border-style: solid; border-color:white; border-width:1px } #footer { padding-top: 20px; text-align: center; clear: both; width: 800px; background: brown; } </style> <title>My Content</title> </head> <body> <div id="heading"> <div id="heading-top"></div> <div id="heading-left"></div> <div id="heading-right"></div> <div id="menu"></div> </div> <div id="container"> <div id="content"> <div id="top-left"><br><br></div> <div id="top-right"><br><br></div> <div id="bottom-left"><br><br></div> <div id="bottom-right"> <div id="featured"><img src="" width="250" height="250"></div><br><br> </div> </div> <div id="side"><br><br><br><br> </div> </div> <div id="footer"> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted February 25, 2010 Share Posted February 25, 2010 Which browser? Quote Link to comment Share on other sites More sharing options...
jwk811 Posted February 25, 2010 Author Share Posted February 25, 2010 IE Quote Link to comment Share on other sites More sharing options...
haku Posted February 25, 2010 Share Posted February 25, 2010 I'm going to guess you mean IE6, but really, all three of the main IEs (6, 7 and behave differently, so you should really specify which you are referring to when asking for help. Anyways, add: display:inline-block; to the floated element and see if that helps. Quote Link to comment Share on other sites More sharing options...
jwk811 Posted February 25, 2010 Author Share Posted February 25, 2010 yeah i think IE6. and that doesnt work. i didnt know where you wanted me to put it but i tried everywhere. in content etc. any other ideas? Quote Link to comment Share on other sites More sharing options...
haku Posted February 26, 2010 Share Posted February 26, 2010 You apply it to the floated element. 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.