bugzy Posted July 6, 2012 Share Posted July 6, 2012 I'm still learning CSS and I'm really annoyed with the white space that I'm getting on all side of the page eventhough I set the width of the container to 100%. Here's the white space that I'm getting. Here's my CSS code #container{ width:100; height:auto; background-color:#666; padding-top:20px; padding-bottom:20px; } #header{ width:80%; height:130px; background-color:#FFF; } #navigation{ width:80%; height:30px; background-color:#CCC; margin-top:10px; margin-bottom:10px; } #body{ width:80%; height:auto; padding-top:10px; padding-bottom:10px; background-color:#333; margin-bottom:10px; } #left-sidebar{ width:20%; height:450px; float:left; background-color:#CCC; margin-bottom:10px; margin-left:30px; margin-top:10px; margin-right:20px; } #content{ background-color:#FFF; width:95%; height:500px; text-align:left; padding-left:30px; padding-top:10px; } #footer{ clear:both; height:30px; background-color:#CCC; width:80%; } Can someone pls. help get rid of the white space so I can make the full background on whatever color I want w/out the white space on every side? Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/ Share on other sites More sharing options...
floridaflatlander Posted July 6, 2012 Share Posted July 6, 2012 try body {margin: 0;} Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359683 Share on other sites More sharing options...
floridaflatlander Posted July 6, 2012 Share Posted July 6, 2012 also try a body background color like a shade of gray or something, just in case something happens in the future the colors will at least blend. also container needs to be #container{ width:100%; ............... } Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359684 Share on other sites More sharing options...
bugzy Posted July 6, 2012 Author Share Posted July 6, 2012 try body {margin: 0;} Hey my elements are all inside the container so my technique is just put the background color I want also on the container. I put body {margin: 0;} on the container. Like this: #container{ width:100; margin:0; height:auto; background-color:#666; padding-top:20px; padding-bottom:20px; } but it doesn't give any effect and white spaces are still there... What do you think? Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359695 Share on other sites More sharing options...
Pikachu2000 Posted July 6, 2012 Share Posted July 6, 2012 width: 100%; Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359697 Share on other sites More sharing options...
bugzy Posted July 6, 2012 Author Share Posted July 6, 2012 width: 100%; Oops.. I already fixed it but there's still a white spaces on each sides.... what do you think? Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359700 Share on other sites More sharing options...
Pikachu2000 Posted July 6, 2012 Share Posted July 6, 2012 So your CSS file looks like this and it still doesn't work?? body { margin:0; } #container { width:100%; background:silver; margin:0px; } Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359703 Share on other sites More sharing options...
floridaflatlander Posted July 6, 2012 Share Posted July 6, 2012 Hey my elements are all inside the container so my technique is just put the background color I want also on the container. There is a color(white) and a margin for the body. try body {margin: 0;} Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359707 Share on other sites More sharing options...
Mahngiel Posted July 6, 2012 Share Posted July 6, 2012 /* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } credits Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359709 Share on other sites More sharing options...
floridaflatlander Posted July 6, 2012 Share Posted July 6, 2012 You need to get fire foxes firebug, it is a big help. When you use it, it will highlight the margins and padding. Also when you hover over or click an html tag it will tell you what file and line number a style is coming from(a big help) and the inheritence of any. Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359715 Share on other sites More sharing options...
bugzy Posted July 6, 2012 Author Share Posted July 6, 2012 So your CSS file looks like this and it still doesn't work?? body { margin:0; } #container { width:100%; background:silver; margin:0px; } Ok I tried this.. #bg{ margin:0; } #container{ width:100%; height:auto; background-color:#666; padding-top:20px; padding-bottom:20px; } Tried it and it's not working... I'll post all the codes including the html to make it clear.. CSS #bg{ margin:0; } #container{ width:100%; height:auto; background-color:#666; padding-top:20px; padding-bottom:20px; } #header{ width:80%; height:130px; background-color:#FFF; } #navigation{ width:80%; height:30px; background-color:#CCC; margin-top:10px; margin-bottom:10px; } #body{ width:80%; height:auto; padding-top:10px; padding-bottom:10px; background-color:#333; margin-bottom:10px; } #left-sidebar{ width:20%; height:450px; float:left; background-color:#CCC; margin-bottom:10px; margin-left:30px; margin-top:10px; margin-right:20px; } #content{ background-color:#FFF; width:95%; height:500px; text-align:left; padding-left:30px; padding-top:10px; } #footer{ clear:both; height:30px; background-color:#CCC; width:80%; } HTML <body> <div id="bg"> <div id="container"> <center> <div id="header">This is the header.</div> <div id="navigation">This is the navigation</div> <div id="body"> <div id="left-sidebar">This is the left sidebar</div> <div id="content">This is the content</div> </div> <div id="footer">This is the footer</div> </center> </div> </div> </body> </html> I already have div named "body" so I just named the margin 0 "bg". I'm not sure if I need to put all the divs in div "bg" ? I don't why it isn't still working.. white spaces are still there... Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359716 Share on other sites More sharing options...
Zane Posted July 6, 2012 Share Posted July 6, 2012 you need to set it for both body and html body, html { margin: 0px; padding: 0px; width:100%; } Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359718 Share on other sites More sharing options...
bugzy Posted July 6, 2012 Author Share Posted July 6, 2012 you need to set it for both body and html body, html { margin: 0px; padding: 0px; width:100%; } Hey thank you guys for all you patience.. I though I will make the "body" a div also with # sign Now it's working already Thanks guys! Quote Link to comment https://forums.phpfreaks.com/topic/265318-how-can-i-remove-the-white-space-on-the-side/#findComment-1359719 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.