Edinburgh Web Development

Float thinks it's the containing block

by Iain Wilson

15 April 2007

The day will no doubt come when IE6 is obsolete and we can all forget about it. But until then, designers have to put up with its charming idiosyncracies. Here's one that drove us crazy for an hour. If we had thought for a minute, we would have remembered the Holly Hack, but you know how it is.... let's just try one more thing...

Here's the problem. We have a containing block, positioned relatively.

<div style= "position:relative;">
---
</div>

Then we float an image to the left

<div style= "position:relative;"> 
<img style="float:left" src="images/bigpic.jpg" alt="photo" /> 
--- 
</div>

Everything is fine. Now we want to position another block absolutely so that it overlaps the floated image.

<div style= "position:relative;"> 
<img style="float:left;" src="images/bigpic.jpg" alt="photo" /> 
<div style= "position:absolute; top:150px; left:80px;"> 
block content 
</div> 
--- 
</div>

Great. Everything's positioned correctly on Firefox, Safari, Opera and IE7, now let's check IE6.

Wow, the absolutely positioned block is way off to the right. In fact, it looks like IE6 thinks that the floated image is the containing block!

The fix

Apparently, the error is caused when the IE6 property hasLayout is not set. As per the Holly Hack, the way to set it is to give the containing block some dimension setting - height or width. So changing the containing block specification fixes it.

<div style= "position:relative; width:100%;"> 
--- 
</div>

Liked this article? Please share it with your friends and colleagues.


comments powered by Disqus
 
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT,
0131 208 1792
Terms, Cookies & Privacy