IE 7 acting strange or is it just me.

Question

Hello everyone

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

IE8

Answer 1

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 )

Answer 2

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.

Answer 3

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.