Need answer with width


#1

Adding my code. When i set width:100% in the #header the block goes off screen. When i set width:100% in my #footer it works just fine. Why so?
div {
border-radius:5px;
}

header {

height:3em;
width:98%;
background-color:brown;
position:fixed;
z-index:1;
}

.left {
height:21em;
width:3em;
background-color:#d0e9e1;
float:left;
margin-top:3.2em;
margin-bottom:0.1em;

}

.right {
height:21em;
width:92.6%;
background-color:#9b6e4b;
float:right;
margin-top:3.2em;
margin-bottom:0.1em;
}

footer {

height:3em;
width:100%;
background-color:#7f8084;
clear:both;

}


#2

your #header is fixed, and your footer isn't. A body has a margin by default, which a relative/static position respects, but a fixed element doesn't on the right side. Simple remove body's margin.


#3

body {
margin:0
}

like this?


#4

i would personally add a semi-colon after margin: 0, but for the rest, yes


#5

Thanks. Can be closed now


#6

I was in a bit of rush,i forgot to explain. normally, a percentage width/height inherits from its parent, which happens to your footer. But the header is fixed, which means it will be taken out of flow, and be 100% in screen width, and by the margin of the body it will go outside of the screen