Percentage width for fixed elements?

Question

I have html like this:

<div id='content'>
    <div id='first'>...</div>
    <div id='second'>...</div>
</div>

#content
{
    width:100%;
    position:relative;
    padding:20px;
}

#first
{
    width:70%;
    position:relative;
}

#second
{
    width:70%;
    position:fixed;
}

this causes the second div to be a bit wider (40px to be exact) than the first div, because the first div's 70% is with respect to the content's width (which is 100% minus the padding of 20px on each side).

What does the second div's 70% refer to? How could I make it so that the two divs are the same width?

Answer 1

The first div's 70% refers to 70% of the width of #content.

The second div's 70% refers to 70% of the width of the viewport.

If you add this CSS, the two div's are the same width:

html, body {
    margin:0; padding:0
}

Live Demo