Percentage width for fixed elements?

I have html like this:

<div id='content'>
    <div id='first'>...</div>
开发者_JAVA百科    <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?

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

According to the CSS 2.1 Positioning Scheme spec:

In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport...

This leads me to believe that the 70% you're setting is actually 70% of the viewport.

As far as making it the same width as the other div, perhaps you could use JavaScript (or specify widths explicitly).

This weird behavior (great question!!) can be referred about the fact that the relative div (first) take the width looking at his father. The second one just look at the viewport, no matter who is its father (and what width is set to its father)!

This can fix your problem:

body,html{
    padding:0;
}

Edit -> Fiddle

I set an absolute width using javascript to detect the computed width of #first.