[thelist] Absolute positioned element and width 100% in IE

Bill Moseley moseley at hank.org
Sun Jul 26 18:23:03 CDT 2009


On Sun, Jul 26, 2009 at 1:02 PM, James O'Donnell <jimmyropes at gmail.com>wrote:

> It probably has to do with the way IE interprets the CSS box model, which
> is
> different than the W3C box model.
>
> Take a look at
> http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug


Thanks.  I was actually curious about how IE inherited the width value.  I
guess it could be part of the box model bug.

 <div id="out">
    <div class="bar">
        <span>
            20%
        </span>
    </div>
</div>

If the outer div "out" is position:relative and the span is position
absolute it seems in IE the width is inherited (well, via width: 100%) from
the inner "bar" div, not from the outer div, which seemed to be the case in
other browsers.

The goal is for the span to have the same width as the "out" div.

The solution is to not use width: 100% on the span, but set it explicitly.

The other approach is to simply not inherit from it.
<div id="out">
    <div class="bar"></div>
    <span>20%</span>
</div>





-- 
Bill Moseley
moseley at hank.org



More information about the thelist mailing list