Width: equal percentage values, different sizes


#1

Hey everyone,
I'm trying to make the footer and the header the same size, so that they're aligned. As you can see on the CSS I've assigned a width value of 97.5% on both, but the footer is slightly smaller on the right side. I thought it had something to do with the margin given to the right div, that would give the footer an automatic margin to the right thanks to the "clear:both" yet even if i delete the margin on the right div the size is still not equal. :confused:

Can someone shine some light on this?
(i'm not really looking for a work around, I would really like to understand what's causing it.)

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css";></link>
    </head>
    <body>
        <div class="header">a</div>
        <div class="left">a</div>
        <div class="right">a</div>
        <div class="footer">a</div>
    </body>
</html>

div{
    border: 2px solid black;
}

.header {
    background-color: green;
    height: 50px;
    width: 97.5%;
    position: fixed;
    z-index: 1;
}
.left {
    background-color: blue;
    height: 75%;
    width: 25%;
    float:left;
    position: relative;
    margin-top: 60px;
}
.right {
    background-color: yellow;
    height: 75%;
    width: 50%;
    float: right;
    position: relative;
    margin-right: 10px; 
    margin-top: 60px;
    margin-bottom: 10px;
}
.footer {
    background-color: red;
    height: 50px;
    width: 97.5%;
    clear: both;    
}

Thanks!!


#2

You can simple removes body margin, like i did here by adding body { margin: 0 auto; } to remove bodys default margin.