Chocobo_Master
New Member
Here's the problem I'm having:
I made a floating div using relative position and it works fine on IE7. When I try it on IE6, although it floats like it should, it still "occupies" the space it would, if it wasn't floating. I think I made it a little confusing, so imagine this:
Let's say the floating div has a height of 100px. The problem in IE6 is that, when I make the floating div visible, the mainDiv grows 100px as if the floating div was occupying that space, even though it is floating.
Oh, it's also worth noting that I'm using MultipleIE so it would also be nice if someone can confirm if this is a problem that happens in the real IE6. And if it is really a problem, is there a solution.
Of course, I can always use absolute positioning instead of relative, but I wan to avoid that, since it changes according to the window size.
Here's the CSS of the floating div:
#floatingDiv
{
width: 350px;
height: 30px;
position: relative;
top: -450px;
left: 170px;
z-index:30;
border: solid 2px #000;
}
I made a floating div using relative position and it works fine on IE7. When I try it on IE6, although it floats like it should, it still "occupies" the space it would, if it wasn't floating. I think I made it a little confusing, so imagine this:
HTML:
<div id="mainDiv">
bla bla bla
<div id="floatingDiv">I'm floating</div>
</div>Let's say the floating div has a height of 100px. The problem in IE6 is that, when I make the floating div visible, the mainDiv grows 100px as if the floating div was occupying that space, even though it is floating.
Oh, it's also worth noting that I'm using MultipleIE so it would also be nice if someone can confirm if this is a problem that happens in the real IE6. And if it is really a problem, is there a solution.
Of course, I can always use absolute positioning instead of relative, but I wan to avoid that, since it changes according to the window size.
Here's the CSS of the floating div:
#floatingDiv
{
width: 350px;
height: 30px;
position: relative;
top: -450px;
left: 170px;
z-index:30;
border: solid 2px #000;
}