IE7 float left and stacking problem

Question

Quick question about floating elements left with IE7. Basically I have some HTML like this

<div><a href></a></div>
<div><a href></a></div>
<div><a href></a></div>
<div><a href></a></div>

The divs need to line up next to each other inline horizontally.

Right now the divs are floated left and the anchor tags inside them have background images, width, height and display:block.

As of now it works in all browsers except IE6 + 7. In those two browsers everything is stacked on each other like a pile vertically. Is there a quick way to fix for IE? I only have access to the CSS file. I cannot edit the HTML.

Answer 1

try using this:

zoom: 1; // IE hack to trigger hasLayout
*display: inline; // IE hack to achieve inline-block behavior
*float: none;

it will only be read by IE, it's a hack, but since you can't access the html, might work.

Answer 2

Make sure you have the width of the parent container wrapping your divs that you are floating left. Also set the width of each div that is floating left and it should work.

<div id='wrap-it'>
    <div><a href></a></div>
    <div><a href></a></div>
    <div><a href></a></div>
    <div><a href></a></div>
</div>
<style>
    #wrap-it { width: 200px; }
    #wrap-it div { float: left; width: 50px; }
</style>