Floats and percentage heights and widths in Internet Explorer

Question

I have a fluid mosaic of floating boxes using percentages for width and height.

It works great in Webkit browsers and Firefox, just look at this jsfiddle: http://jsfiddle.net/Mtk57/

I use this technique to specify height from current width: http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

The problem lies with the rows that have different-width blocks, 2 blocks of 30% and 2 blocks of 20%.

Code for height (20%-width blocks)

.mosaic li::after {
    display:block;
    padding-top:100%;
    content: '';
}

Code for height (30%-width blocks)

.mosaic li::after {
    padding-top:66.6666666666666666666667%;
}

In Internet Explorer, the decimals of the height differs slightly, and it seems to be enough to prevent the block from falling at the beginning of the next row. Internet Explorer doesn't seem to round the pixel values, why?

I think I could put clear:both; using :nth-child, but I want to know if there is a better solution.

Answer 1

It's not easy to make it work with floats, and I couldn't come up with a satisfactory solution. However I did find a similar solution with inline blocks that ends up looking exactly the same. Key points:

a) change float: left; to display: inline-block; inside .mosaic li {}

b) make sure there is no whitespace between <li> elements (otherwise there will be horizontal gaps).

c) add line-height: 0; to .mosaic {} (otherwise there will be vertical gaps).

Resulting js-fiddle: http://jsfiddle.net/RN4pj/2/