davej Posted November 30, 2010 Share Posted November 30, 2010 I was just playing with this and it is more confusing than I expected. Why do I see gray above and below the content area? Don't I have padding and margins zeroed? Thanks. <html><head><title>left navbar with header and footer</title><style type="text/css"><!--body { padding: 0; margin: 0;}#container { width: 800px; margin: 0 auto; background-color: gray;}#header { height: 200px; background-color: red; margin: 0; padding: 0;}#nav { float: left; clear:none; width: 200px; background-color: green;}#content { clear:none; padding: 0; margin: 0; background-color: yellow;}#footer { clear:both; margin: 0; padding: 0; background-color: blue;}--></style></head><body><div id="container"><div id="header"><p>Insert some dummy header text here.</p></div><div id="nav"><p>Insert some dummy nav text here.</p></div><div id="content"><p>Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here. Insert some dummy content text here.</p></div><div id="footer"><p>Insert some dummy footer text here.</p></div></div> <!-- end of container --></body></html> Link to comment Share on other sites More sharing options...
jeffman Posted November 30, 2010 Share Posted November 30, 2010 You may have trouble with no doctype.Inheritance generally works, but you might do better to zero margins and padding with the universal selector instead of the body. I.e.: * { padding: 0; margin: 0;} Link to comment Share on other sites More sharing options...
dsonesuk Posted November 30, 2010 Share Posted November 30, 2010 #container is receiving the margins used for the paragraphs, use overflow:hidden; should fix it. Link to comment Share on other sites More sharing options...
davej Posted December 1, 2010 Author Share Posted December 1, 2010 Thanks for the replies. The universal selector was a great idea. I will have to experiment with overflow:hidden.Adobe templates always set up body {}, ul,ol,dl, {}, and h1,h2,h3,h4,h5,h6,p {} styles to cancel browser default styling. I wonder if the universal selector could simplify this? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 1, 2010 Share Posted December 1, 2010 it's a collapsing margins issue, everyone lately seems to have this problem http://reference.sitepoint.com/css/collapsingmargins Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.