Question

I have a CSS problem with IE6. I wan’t to have multiple divs side by side (this is working great, also in IE6), but inside each div I wan’t a element to be floated right. This works in Chrome 13 and other newer browsers, but IE6 and 7 does not display it correctly. Each div takes up the whole width of the parent div.

The width of each div may vary, so I can’t set the width.

Here is the 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>

And this is the 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;
}

The code can be tested here: http://jsfiddle.net/K64vZ/94/

Answer 1

Change this part of code and try again:

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

.singlePhoto button {
    display: inline;
}