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? 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;} 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%; ............... } 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? 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%; 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? 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; } 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;} 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 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. 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... 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%; } 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! 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
Archived
This topic is now archived and is closed to further replies.