IE 7 acting strange or is it just me

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="con开发者_JS百科tent">
    <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

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.

Looked at your page -- this may or may not be the problem, but I notice you don't have a legal DOCTYPE. Try fixing that first.

My bad -- I was looking at the Chrome inspector not the source. The DOCTYPE looks fine.

Have you tried to remove the overflow:hidden; property?

I've tried in Safari, and removing the overflow:hidden; does not seem to change the layout

( don't have IE7 here so I can't really test it )