Help, 100% causes the page to have scrollbars

[Brih]

I'm trying to do something real basic, and I've been stuck on this for a long time.

I have a div with 100% width, 100% height.. and another on inside of it that I want to be 20px smaller.


html
{
width: 100%;
height: 100%;
}

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

div#outer-border
{
width: 100%;
height: 100%;
background-color: #D9EDF4;
padding: 20px;
}

div#inner-border
{
width: 100%;
height: 100%;
background-color: #FFFFFF;
}



<div id="outer-border">
<div id="inner-border">
</div>
</div>


How can I make it stay within the window, and not have horizontal scrollbars when I add the inner div?

[KDLA]

This might be a simpler way of doing it.
css

body {
width: 100%;
margin: 0px;
padding: 0px;
}
#container {
border: 20px solid #d9edf4;
width: 100%;
}

html

<div id="container">
<p>your text</p>
</div>

KDLA

[Brih]

Hi!, I've tried that and I still get the same issue.. here's what I mean: http://brian.apexstructure.com/page.login.php :confused:

[ray326]

div#outer-border
{
width: 100%;
height: 100%;
background-color: #D9EDF4;
padding: 20px;
}That makes a block that is 40px wider and taller than the screen.

[Brih]

That makes a block that is 40px wider and taller than the screen.

How can I create a full page div with 20px spacing on all sides? I've tried KDLA's version and it also did the same thing.

[Brih]

Got it after looking at some templates..


html
{
padding: 0px;
margin: 0px;
}

body
{
background-color: #daecf4;
padding: 0px 20px;
margin: 0px;
}

#outer-border
{
background-color: #ffffff;
}


Don't know how that works, but it does.

[NogDog]

A DIV will, by default, be a "display: block" element. As such, it will take up all the available width of its container (minus any margin values it has and/or padding values the container has). So what you are doing is making sure there is no default padding/margin for body, which is your main container. Then, if the div has no margin, it will fill the entire width.

Part of the problem you were having is that a width applies just to the actual content. The entire horizontal space taken up by the element will equal width + left margin + left border + left padding + right padding + right border + right margin.

[pcthug]

Part of the problem you were having is that a width applies just to the actual content. The entire horizontal space taken up by the element will equal width + left margin + left border + left padding + right padding + right border + right margin.
Known as the boxmodel (http://www.w3.org/TR/CSS21/box.html)