views:

503

answers:

4

I have 2 inputs: they both have a width: 100%, and the second one is an absolute box:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">
            #box1 { position: absolute }
            #box1 { background: #666  }
            input { width: 100% }
        </style>
    </head>
    <body>
        <form>
            <input type="text">
            <div id="box1">
                <input type="text">
            </div>
        </form>
    </body>
</html>
  • On standard-compliant browsers, the width: 100% seems to have no effect on the input inside the absolutely positioned box, but it does on the input which is not inside that absolutely absolute box.
  • On IE7, both inputs take the whole width of the page.

Two questions come to mind:

  • Why does the width: 100% have no effect with standard-compliant browsers? I have to say that the way IE7 renders this feels more intuitive to me.
  • How can I get IE7 to render things like the other browsers, if I can't remove the width: 100% and can't set a width on the absolutely positioned box?
A: 

position: absolute takes the element out of the document flow. Width automatically becomes auto when making position: relativeas far as I know.

I think you won't get around giving #box1 a fixed width (using a width property or coordinates like left: xyz; right: xyz) or the text input.

How can I get IE7 to render things like the other browsers, if I can't remove the width: 100% and can't set a width on the absolutely positioned box?

Good question. As far as I know, there is no fix for this behaviour. Setting width: auto should help.

Some theory on position: absolute on W3C here.

Pekka
A: 

When a block element (your div - #box1) is absolutely positioned, it's kinda loses its implied 100% width. Which is why the input cannot expand beyond its container (which is now of 0 width).

Developer Art
The "it's kinda loses its implied 100% width" is indeed what I observe. But where is that specified in the spec? Why would it loose it 100%?
Alessandro Vernet
+1  A: 

The CSS 2.1 specification says that what happens in this case is not specified. And indeed, different browsers implemented this differently. You'll find more details on this (including more cases and screenshots) on: Width property inside an absolutely positioned box.

Alessandro Vernet
A: 

This may sound odd, but what happens when you try width: 98%? In the past, I found that using 100% width never had a consistent result, but 98% did.

Kevin
@Keving, in this case, using `width: 98%` doesn't make a difference.
Alessandro Vernet