CSS 100% width is more that 100%

4
votes

I'm learning CSS and I tried to create a simple layout.

I set the "header" to have a width of 100%, the "left" to have a width of 20% and the "right" 80%. But the width of the header is greater than the total width of the left and the right. Why is that and how to fix it?

    div {
        border-radius: 10px;
    }
    
    #header {
        z-index: 1;
        background-color: #80B7ED;
        height: 50px;
    	width: 100%;
        position: fixed;
    }
    
    .left {
        background-color: #5A9DE0;
        height: 400px;
        width: 20%;
        float: left;
        position: relative;
    }
    
    .right {
        background-color: #BFD9F2;
        height: 400px;
        width: 80%;
        float: right;
        position: relative;
    }
    
    #footer {
        background-color: #80B7ED;
        clear: both;
        height:70px;
    }
    <!DOCTYPE html>
    <html>
    	<head>
    		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    		<title></title>
    	</head>
    	<body>
    	    <div id="header">
    	    </div>
    	    <div class="left">
    	    </div>
    	    <div class="right">
    	    </div>
    	    <div id="footer">
    	    </div>
        </body>
    </html>

Edit

Thanks to your answers and to some reading I get now that the problem is the margin of the body section. When I use body {margin: 0;} the "left" plus the "right" take a bigger place in the page and the "header" takes a smaller place, so their widths are equal.

Another solution with the same result is adding a "container" div around everything with "left: 0; right: 0; position: absolute;".

I understand why these solutions make the "left" plus the "right" bigger (so they take the whole page), what I don't get is why the "header" is suddenly smaller. If the fixed "header" is out of the regular flow, why changing the margin of the body influeces it? 

body {
    margin: 0;
}

div {
    border-radius: 10px;
}

#header {
    z-index: 1;
    background-color: #80B7ED;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: 0;
    height: 50px;
	width: 100%;
    position: fixed;
}

.left {
    background-color: #5A9DE0;
    height: 400px;
    width: 20%;
    float: left;
    position: relative;
}

.right {
    background-color: #BFD9F2;
    height: 400px;
    width: 80%;
    float: right;
    position: relative;
}

#footer {
    background-color: #80B7ED;
    clear: both;
    height:70px;
}
<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title></title>
  </head>
  <body>
    <div id="header">
    </div>
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div id="footer">
    </div>
  </body>
</html>

Thanks

3
htmlcsslayoutwidthstylesheet
margins - that's not included in the width calculation by default. e.g. a box's full width is leftmargin + leftpadding + box width + rightpadding + rightmargin. – Marc B
@MarcB there are no margins involved here ? But indeed that is a classic too – Laurent S.
there's always default margins, unless you're using a CSS reset somewhere. – Marc B
This link will help you understand more about CSS box models – GeekByDesign
Thanks for the comments. I added margin: 0; padding: 0; border: none; to the div selector and it still doesn't work. – Ella Sharakanski

3 Answers

9
votes

When using percentage widths the margin, padding and border are not included in the calculation. So you want to be sure all of those are set to 0 on the corresponding elements.

margin: 0;
padding: 0;
border: none;

Alternatively, you could use the box-sizing property which will make the calculation include padding and border. Then you would only have to account for the margins elsewhere.

box-sizing: border-box;
1
votes

Here you go: 

body{
    margin:0px;
}
div {
    border-radius: 10px;
}
#wrapper {
    padding: 0%;
}
#wrap {
    float: left;
    position: relative;
    width: 100%;
}
#header {
    position:fixed;
    width:inherit;
    z-index:1;
    padding:0px;
    height:50px;
    border-radius:10px;
    background-color: #80B7ED;
}
.left {
    background-color: #5A9DE0;
    height: 400px;
    width: 20%;
    float: left;
    position: relative;
}
.right {
    background-color: #BFD9F2;
    height: 400px;
    width: 80%;
    float: right;
    position: relative;
}
#footer {
    background-color: #80B7ED;
    clear: both;
    height:70px;
}
<html>
<body>
<div id="wrapper">
    <div id="wrap">
        <div id="header"></div>
    </div>
</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>

See here jsfiddle

EDIT:

If you wish to add a margin, I'd suggest you add a variable margin, for instance 2% or 3%, and then you substract that quantity from the left column, the right column, or both. And then you set the width of the #wrapp to be 100-2*x %, where x is the amount of margin you added.

1
votes

Another way is to use overflow: hidden; for parent div and set width:100%; for the child element. This way, more width will be hidden.