IE7 Image float bug.

Question

http://wilwaldon.com/ie7bug/test1.php

Notice the middle column, the images are supposed to float left, they do in every browser but IE7. I've never encountered this problem before and have no idea what's going on with it.

Any ideas that would point me in the right direction would be greatly appreciated, thank you.

UPDATE

If I delete width: 330px from #contentleft p the spotlights line up perfectly, but I ran into a new problem. The left column wraps the right column now. Ughh! IE7!!!

Answer 1

From your question it is not clear what exactly you are trying to achieve to float the image left of the Heading and the paragraph or just left of the paragraph. Could you please attach images showing the desired result and what you consider the bug.

Answer 2

Copy paste this in empty html and see how it works. Should fix all your issues. Fix the width of .box to match your needed width. It also works if div.left is empty and you don't have image there.

<div class="box">
    <div class="left">
        <img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
    </div>
    <div class="right">
        <h2>Heading</h2>
        <p>Paragraph text</p>
    </div>
</div>



<style>
    .box {
        width: 600px;
        background: red;
        }
    .left {
        float: left;
        width: auto;
        }
</style>

Answer 3

I don't like doing this, but this is a way to achieve the effect with IE7 using jQuery:

    $(function() {

        $(".spotlight .item img").each(function() {

            $(this).css("marginBottom", $(this).parent().height() - $(this).height());

        });

    });

See http://test.sua.umn.edu/test.kamran/ie7float.html

Answer 4

You seem to be using display: table-cell to have the text appear in a column next to the floated image instead of wrapping around it.

You should be using overflow to achieve that effect:

.spotlight1 p { 
    color: #333333;
    font-size: 12px;
    overflow: hidden;
}

You'll have to get rid of the width on those paragraphs too, though, which they're now getting from the #contentleft p.

But you can use the same trick for the leftmost two columns altogether if you put the #inner2right2 div right before the #inner2left div. You can then use overflow on that left column to make them stay next to each other. That way you can get rid of the width you're setting on the #contentleft p too.

This will work in IE7 too.

I think it'll work in IE6 as well if you give those same blocks "layout". The easiest way to do that is by adding zoom: 1.