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

![enter image description here](https://i.stack.imgur.com/LnD6W.png)

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: 
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](http://jsfiddle.net/BMWnh/1/).

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](http://jsfiddle.net/eNhvd/) 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).
You can do the `ul { top: -200px or margin-top: -200px;}` , which would work.