Absolutely positioned divs randomly disappear

8 May, 2008

We came across a problem today that had us completely stumped. With a certain site on IE7 an absolutely positioned div would randomly disappear. In IE6 the story was far worse with the div not showing up at all.

In the end we tracked it down to a bug in IE where an absolutely positioned item next to a floated item would cause the absolute item to disappear! The solution? Add in an empty div before and after the absolutely positioned one.

So it looks like this:

<div style=”float:left”>The floated Div!</div>

<div class=”emptyDivToFixAbsoluteVanishingBug”></div>

<div style=”position:absolute; top:0; right:0;height:12px; width:40px; background-color:#00ff00;”>Here’s the absolute Div!</div>

<div class=”emptyDivToFixAbsoluteVanishingBug”></div>

5 Responses to “Absolutely positioned divs randomly disappear”

  1. Mark said

    This really helped me, thanks!

  2. Pree said

    Brilliant, helped loads. So simple.

  3. Jim said

    Bizarre… thanks so much for the tip.

  4. [...] Then it would come wandering back the next time.  Luckily, thanks to Google, I found the answer on Make it Mobile.  Turns out that an absolutely positioned element next to a floated element will randomly not show [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.