Percentage Width For Fixed Elements?

I have html like this:

...

...

#content { width:100%; po

Solution 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

Solution 2:

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).

Solution 3:

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

Solution 4:

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