Question

I have a website that has a design like google web store. This is what it looks like:

if you’ll notice in the bottom area the 2 boxes are not filling up the space above.

boxes is wrap by ul and items are in li. The list items are float by left and ul is has a clear.

Here is the link for jsfiddle http://jsfiddle.net/wTCKr/

Please suggest CSS or any JS that will fix this. Thank you.

Answer 1

If you want large boxes on the right, you will need to float them right so that the smaller boxes on the left will fill in correctly.

<li class="items big" style="float:right">

See this updated JS Fiddle fork.

This will not solve the problem if you put the big box in the middle. If you also need to support that case, I would suggest it’s time to use absolute positioning and some jQuery or JS to do the layout for you.

Update: I enjoy a quick challenge, so I wrote some JS to do absolute positioning for you. I used jQuery, but you can convert it to straight JS if you don’t use jQuery on your site. The code assumes that you have the right number of boxes in a valid order (eg. you can’t put a big box on the last row if all the other rows are filled with small boxes).