CSS: Why an input width:100% doesn't expand in an absolute box?

StackOverflow https://stackoverflow.com/questions/2458731

Question

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">
<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?
Was it helpful?

Solution 2

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.

OTHER TIPS

Try using width:102%. It's a workaround, but it works almost perfect.

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.

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top