If padding is inside, why will the div be wider with padding?

Question

I have this div on the CSS:

#bodycontent {
    max-width:980px;
    margin:auto; 
}

#navleft {
    width:18%;   
    border:0px;
    float:left;
}

#rightcontent {
    max-width:80%;
    border:0px;
    float:right;
}

and on the HTML:

<div id="bodycontent">
    <div id="navleft">
        some stuff
    </div>
    <div id="rightcontent">
        some stuff
    </div>
</div>

Now I have 2 problems:

1. If I set the divs 20% and 80% I'll have the divs displayed not side by side but one above and one below
2. I'd like to have 25px of padding-left on the rightcontent div but, again if I set the padding, the div goes below the other.

Why? The padding is not inside?

Answer 1

The width property is defined (in CSS 2) as the width of the content, not the space between the borders. Padding goes inside the borders, not inside the width.

In CSS 3, you can change this with the box-sizing property but this has limited support.