CSS: проблема с IE6 и несколькими элементами div, расположенными рядом, и элемент внутри float right

Question

У меня проблема с CSS в IE6.Я не хотел бы иметь несколько div'ов бок о бок (это прекрасно работает, в том числе и в IE6), но внутри каждого div'а я не хочу, чтобы элемент плавал правильно.Это работает в Chrome 13 и других новых браузерах, но IE6 и 7 не отображают его правильно.Каждый div занимает всю ширину родительского div.

Ширина каждого div может варьироваться, поэтому я не могу установить ширину.

Вот HTML:

<div id="wrapper">
    <div id="flickrImages">
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
        <div class="singlePhoto">Blarg
            <button>Press me!</button>
        </div>
    </div>
</div>

А это CSS:

#wrapper {
    width: 969px;
    margin: 36px auto 50px auto;
}

#flickrImages {
    overflow: hidden;
}

.singlePhoto {
    background-color: #e0e0e0;
    float: left;
    margin-right: 10px;
    padding: 10px;
}

.singlePhoto button {
    float: right;
}

Код можно проверить здесь: http://jsfiddle.net/K64vZ/94/

Answer 1

Измените эту часть кода и повторите попытку:

.singlePhoto {
    background-color: #e0e0e0;
    display: inline;
    width: 170px;
    margin-right: 10px;
    padding: 10px;
}

.singlePhoto button {
    display: inline;
}