Floating div in IE6

Chocobo_Master · 04-03-2009, 02:07 PM

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:

HTML Code:

<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;
}

mezangath · 04-03-2009, 02:16 PM

IE6 interperts CSS like a donkey on speed.

Have you tried tried it in Mozilla?

Chocobo_Master · 04-03-2009, 02:53 PM

no, haven't tried on Mozilla yet...
Is this to be expected from IE6 then? Isn't there a way to get around this?

Chocobo_Master · 04-03-2009, 04:45 PM

Found a solution!
If I use "overflow:hidden" on the mainDiv, its height remains unchanged.
Thanks!

04-03-2009, 02:07 PM	#1
Chocobo_Master New Member Join Date: Apr 2009 Posts: 3	Floating div in IE6 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: HTML Code: <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; }

04-03-2009, 02:16 PM	#2
mezangath Silver Member Join Date: Mar 2009 Location: Stockholm, Sweden Posts: 108	IE6 interperts CSS like a donkey on speed. Have you tried tried it in Mozilla? __________________ Nerdrage Mezangath Web

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

04-03-2009, 02:53 PM	#3
Chocobo_Master New Member Join Date: Apr 2009 Posts: 3	no, haven't tried on Mozilla yet... Is this to be expected from IE6 then? Isn't there a way to get around this?

04-03-2009, 04:45 PM	#4
Chocobo_Master New Member Join Date: Apr 2009 Posts: 3	Found a solution! If I use "overflow:hidden" on the mainDiv, its height remains unchanged. Thanks!