Question

I am working on this layout (Vertical centered,fluid middle div with, fixed heights)
http://jsfiddle.net/chchrist/uyzJj/13/

My problem is that in Firefox the #bluebox’s position isn’t relative to the div#wrapper. How can I fix this?

Thanks in advance.

Answer 1

Option 1

On #wrapper changing display: table-cell to float: left will solve your problem.
Live example: http://jsfiddle.net/uyzJj/18/

#wrapper {
    border: 1px solid #000000;
    float: left;
    position: relative;
    vertical-align: middle;
    width: 100%;
}

Option 2

On #superWrapper changing display: table to display: block will solve your relative problem.