IE 6 absolute positioning horror.

[monkeyBoy32]

Hi - I can't seem to fix this problem.

Lets say I have 2 divs - one nested inside the other:

<div id="container">

<div id="absDiv"></div>

</div>

And then my css is:

#absDiv {
width: 100%;
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: #3399CC;
padding: 9px;
}
#container {
height: 300px;
width: 300px;
}

Now - in ie7 and firefox absDiv breaks free from the flow of the page, or more importantantly, from container div. It expands 100% width of the page - which is what I'm after.

Now - in ie6, even though this is absoulte positioning, absDiv only expands to the width of container div (in this case 300px;)

What I want is a method of styling a nested div so it breaks free from nay parent divs and is 100% screen width.

I thought the whol point of absolute positioning was that it took the element out of the flow of the document but ie6 doesn't want to play ball..

Any ideas?

Thanks.

[Marshall]

Bt rights, a <div> (child) should only exxpand to the width of its container (parent), so in a sense, IE6 has it right. But why would you place an absolute positioned <div> inside a <div> when you want the nested one wider than the non-absolute positioned one?

Marshall

[monkeyBoy32]

Aha - good question.

I'm developing an ajax application where I have an updateable part of a page - because of the layout of the page, the updateable portion of the page sits in a div which is 300px wide.

I need to display the 100% wide div while my ajax app does it's thing.

I was under the impression that using absolute positioning took the element outside the flow of the document and, therefore, didn't matter where in the document the element was placed.

OK - if IE6 gets it right and all other browsers get it wrong, how can I get IE6 to get it wrong then?