How can I remove the white space on the side?

bugzy · 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?

floridaflatlander · July 6, 2012

try

body {margin: 0;}

floridaflatlander · 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%;

...............

}

bugzy · 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?

Pikachu2000 · July 6, 2012

width: 100%;

bugzy · July 6, 2012

width: 100%;

Oops.. I already fixed it but there's still a white spaces on each sides.... what do you think?

Pikachu2000 · 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;
}

floridaflatlander · 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;}

Mahngiel · 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

floridaflatlander · 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.

bugzy · 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...

Zane · July 6, 2012

you need to set it for both body and html

body, html {
    margin: 0px;
    padding: 0px;
    width:100%;
}

bugzy · 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!

Sign In

How can I remove the white space on the side?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information