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