CODEWITHSUNDEEP
htmlcss
Razor Storm
Razor Storm

Reputation: 12326

Percentage width for fixed elements?

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?

Upvotes: 9

Views: 10206

Answers (4)

Razor Storm
Razor Storm

Reputation: 12326

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

Upvotes: 0

stecb
stecb

Reputation: 14746

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

Upvotes: 2

thirtydot
thirtydot

Reputation: 228132

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

Upvotes: 7

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13292

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

Upvotes: 5

Related Questions