ultrus Posted April 17, 2009 Share Posted April 17, 2009 Hello, I have content in my content section that I gave an extra margin. That's cool, but now those margins are adding an extra gap between the header/content, and content/footer. Eww! This is probably something really simple, but I can't see it at the moment. Even without the added style="margin: 50px;", I still have the issue with the <p> tag on its own (leading me to adding a margin to see what would happen). This occurs in FireFox and Safari, haven't tried IE yet. Any thoughts?: <!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=UTF-8" /> <title>HELP!</title> <style type="text/css"> body, html { padding: 0px; margin: 0px; background-color: #3C0000; } #header { background: #FF9900; height: 137px; } #headerCenter { width: 866px; height: 137px; background: #FF9999; margin: auto; } #content { background-color: #FFFF33; } #contentCenter { width: 866px; background: #FFFFFF; margin: auto; } #footer { background: #FF9900; height: 137px; } #footerCenter { width: 866px; height: 137px; background: #FF9999; margin: auto; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="headerCenter"> </div> </div> <div id="content"> <div id="contentCenter"> <div style="margin: 50px;"> <p>Notice the dark red gap above and below this white box. How do I close the gaps?</p> </div> </div> </div> <div id="footer"> <div id="footerCenter"> </div> </div> </div> </body> </html> Thanks much for the assist in advance!! Quote Link to comment Share on other sites More sharing options...
ultrus Posted April 17, 2009 Author Share Posted April 17, 2009 update: If I change margin to padding of that div, everything looks ok, with room for the default <p> tag margins to not screw anything up. I'm still open to other suggestions though if you have them. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted April 17, 2009 Share Posted April 17, 2009 Sometimes using too many divs creates more than "divitus". <div id="contentCenter"> <p style="margin:0 50px;">Notice the dark red gap above and below this white box. How do I close the gaps?</p> </div> 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.