Question

I have a html like this: The idea is that divs are floated left and when there are more than 3 divs. The next one shoud start at the next line. (Because of the width). This works in almost all the browsers. Even in IE6. But when it comes to IE7. It puts the 4th div on the same line.
Any ideas why?

<div id="content">
    <div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
        <div class="picture" style="float: left; margin-right: 8px;">
            <div class="pictureName">Name...</div><a href="#" class="borderfree"><img alt="" src="/xsmall.png"></a>
        </div>
    </div>
</div>

And the css:

#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
}

Here are some pictures:
Any ideas why?
IE7
IE7 http://www.suaygiri.com/temp/ie7.jpg

IE8
IE8 The Correct One http://www.suaygiri.com/temp/ie8.jpg

Answer 1

try position:relative and display:inline; to .picture
also all the containers have to have fixed widths

if that doesn’t work then you have something else going on

#content {
margin:10px auto;
overflow:hidden;
padding:3px 10px;
width:960px;

}
.picture{
float:left;
width:320px;
position:relative;
display:inline;
}

edit: I didn’t notice the extra div…. shouldn’t cause a problem though.