width: 100% with position: absolute

You can use width:100% and the css attribute box-sizing, to get the box model working like IE 5.5, i.e. padding and border counted into the width.

div.absolute {
    width: 100%;
    border: 5px solid #000;
    background-color: #F00;
    position: absolute; top: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 50px;
}

Here's a fiddle: http://jsfiddle.net/dJtm2/

Be wary though, as it's a relatively new CSS3 attribute and will only work in newer browsers, and as you can see from my example requires the dreadful counter-productive measure that is vendor prefixes.


When I add position:absolute, the width of the div is only as wide as the content within.. (Similar to floats). Is there any way around this?

I cannot simply specify width:100% since this does not take in to account border sizes, etc..

You could use position:absolute; left:0; right:0; top:0.

Like this: http://jsfiddle.net/thirtydot/yQWGV/