在IE7中浮动Div

Question

I really hoped my IE7 woes were over, but my company still supports it across our enterprise, so alas I'm stuck with fixing some glitches. I must be overlooking something incredibly silly, and I was wondering if a fresh set of eyes can help fix. So in this problem, my text div that I have is suppose to float along side the image div, but it isn't working.

<div id="news-container">
    <div class="news-item">
        <div class="news-image" style="background:url('images/site/previewimage.png') no-repeat;">
            <img src="images/site/image-border.png" alt="" />
        </div>
        <div class="news-text">
            <h1>Latest News</h1>
            <h2><a href="#">"Almost, Maine" Tickets are now on sale!</a></h2>
            <p>Text blah blah blah.</p>
            <div class="linkbutton redlink"><a href="#">Read More</a></div>
        </div>
    </div>
</div>

And the CSS...

#news-container {
    width:100%;
    margin:20px 0;
    float:left;
    position:relative;
    clear:both;
}
.news-item {
    width:960px;
    margin:auto;
    position:relative;
}
.news-image {
    height:210px;
    width:340px;
    margin-right:20px;
    position:relative;
    display:block;
    float:left;
}
.news-text {
    width:900px;
    display:block;
    position:relative;
}

Thank you for your help!

Answer 1

It's not really working in Chrome and Firefox.

What's happening is, when you float an element, text within elements that surround the float (that are still in the document flow) will move aside for that float, however the container itself (in your case, .news-text still starts in the same left position.

If your text goes longer than the image, you will see the text fall to the same left starting position as your image.

To get a proper "hanging indent", you need to assign a width to .news-text that is the remainder of the width leftover by the image, and set a left margin to push it away from the image. This will work in all browsers including IE 7.

Preview in IE 7: http://fiddle.jshell.net/EqWA4/show/

To see the code: http://jsfiddle.net/EqWA4/

.news-text {
    width:500px;
    margin-left: 365px;
    display:block;
    position:relative;
}