Question

I have the following code:

<div style="width:560px">
    <div style="float: left; width: 50%; margin-bottom: 20px">
        <div style="float: left; width: 40%">
            <!-- Thumbnail -->
        </div>
        <div style="float: left; width: 60%">
            <!-- Title -->
            <!-- Author -->
            <!-- Price -->
            <!-- Quantity -->
            <!-- Add to Cart -->
        </div>
    </div>
</div>

This is what it looks like in Chrome:

But this is what it looks like in Firefox:

How can I get Firefox to display like Chrome?

Answer 1

Edit: Bedtime reading: The 960 Grid System

This is due to the height of the first element “pushing” the third element across in Firefox, but not in Chrome. Why that’s happening, I don’t know. It’s a common problem when fixed height isn’t used, which in my opinion is good practice too avoid, as you can never really tell how high something will be.

Could I suggest a slight workaround to the layout. It’s slightly more manual, but would ensure a “row-like” layout. By simply adding a row div, it will allow you to ensure there are at least 2 items in a row, like so.

<div id="container">
    <div class="row">
        <div class="item">Item 1...</div>
        <div class="item">Item 2...</div>
    </div>
    <div class="row">
        <div class="item">Item 3...</div>
        <div class="item">Item 4...</div>
    </div>
    <div class="row">
        <div class="item">Item 5...</div>
        <div class="item">Item 6...</div>
    </div>
</div>

In order to “push” the new row starting, you’ll want to clear both, on the row class.

Pros:

• There will always be 2 items in a row
• Items will always start level at the top

Cons

• Changing it to x items per row would require HTML changes