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!! Link to comment https://forums.phpfreaks.com/topic/154544-unwanted-spacing-between-header-content-and-footer-any-thoughts/ 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. Link to comment https://forums.phpfreaks.com/topic/154544-unwanted-spacing-between-header-content-and-footer-any-thoughts/#findComment-812626 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> Link to comment https://forums.phpfreaks.com/topic/154544-unwanted-spacing-between-header-content-and-footer-any-thoughts/#findComment-812636 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.