大小不同的浮动流体正方形的大小调整问题

Question

I hit a wall when coding my design that I can't get past since yesterday afternoon. I have a menu with a classic unordered list and I'm trying to style it into a tile "gallery". I'm working on a 12 column grid and the square tiles are fluid .

This is what it looks like when the squares are floated : http://jsfiddle.net/Lzvna/1/

As you can see, the li:first-child square takes up the space of 4 regular sized li squares on the right. When you resize the window, the squares flex as expected, due to their percentage width and padding values, but when you hit certain resolutions, the last square in this list will get bumped under the 4 squares on the right.

The problem is actually with the 1st square because it doesn't resize "in sync" with the 4 squares on the right when the elements are floated. When you inspect it you'll see that the 1st square is ~1px larger than it should be. It seems to be worst on Opera and Safari. Chrome, FF and IE will break it too, but Chrome seems to be the most benevolent.

I tried reducing the width and padding on the 1st square up to 3px, but it would still break in Opera and the layout would start to get ugly.

Instead of floating, I also tried displaying the squares inline with display: inline-block . Here the resizing issue disappears (the squares resize "in-sync"), but in turn I have a problem with flowing the 4 squares on the right on the same line with the 1st square: http://jsfiddle.net/UaCPN/

Does anybody know how to fix this resizing issue when floating?

If not, is there a way to get the 4 squares to flow the same way when displaying inline-block?

-- Edit --

Additional info

• For smaller screens I plan to reduce the number of columns and flow them under the li:first-child , which will take care of this resizing issue, as I haven't spotted a problem when the elements beside each other have the same width and height, ie: google "Fluid Squares V2" (sorry, can't post more links yet).

• The ammount of list items is not fixed. I want to be able to add more to the top of the stack in the markup and have the styling take care of the rest.

Answer 1

I Believe this happens because it's not possible to render portion of pixel, hence you don't need such great precision in you percentage. Because of the same reason the smaller the screen the more chance your proportions will not break even. So to make it look smoother make different proportions for smaller srceens.

#portfolio-links li:first-child {
  padding: 0 0 47.9% 0;
  width: 47.9%;
}
@media screen and (max-width: 500px){
    #portfolio-links li:first-child {
      padding: 0 0 47.6% 0;
      width: 47.6%;
}
}
@media screen and (max-width: 250px){
    #portfolio-links li:first-child {
      padding: 0 0 47.1% 0;
      width: 47.1%;
    }
}

Downside is that it will not be of exact same height.

Fiddle : http://jsfiddle.net/Lzvna/4/

Edit:
Option 2:
Another solution is if amount of elements is fixed, and you don't mind setting positioning for each of them you can position elements absolutely and take advantage of margin-top as it's calculated relative to the width:

Eg:

#portfolio-links li:nth-child(4) {
  margin-top: 27%;
  left:50%;
}

Downside: very manual. Upside: very precise looks.

Fiddle : http://jsfiddle.net/UaCPN/1/

Answer 2

Yes! Gotcha :D

So in the end, all I had to do was clear the 6th <li> in the stack: http://jsfiddle.net/Lzvna/5/

I think that clearing the element (returning it to normal flow) enables it's top margin to be sacrificed when the 1st element pushes down on it. Unlike when it's floated because according to the spec when an element is floated, its margins never collapse.

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

Source: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Everytime I think I have normal document flow, floats and clearing under my belt, something like this comes along... Please correct me, if my understanding is wrong.