I have some `<li>` that look like some list of boxes.

**screenshot**
![enter image description here](https://i.stack.imgur.com/E8IX3.jpg)

**list**

```html
<ol id="selectable">
    <li class="ui-state-default" id="1"></li>
    <li class="ui-state-default" id="2"></li>
    <li class="ui-state-default" id="3"></li>
    <li class="ui-state-default" id="4"></li>
    <li class="ui-state-default" id="5"></li>
    <li class="ui-state-default" id="6"></li>
    <li class="ui-state-default" id="7"></li>
    <li class="ui-state-default" id="8"></li>
    <li class="ui-state-default" id="9"></li>
    <li class="ui-state-default" id="10"></li>
    <li class="ui-state-default" id="11"></li>
    <li class="ui-state-default" id="12"></li>
</ol>

```

**css**

```css
#selectable { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      width: 450px; 
}
#li .handle { 
      background: #f8f8f8; 
      position: absolute; 
      left: 0; 
      top: 0; 
      bottom: 0; 
      padding:8px; 
}
#selectable li { 
      margin: 3px; 
      padding: 1px; 
      float: left; 
      width: 100px; 
      height: 80px; 
      font-size: 4em; 
      text-align: center; 
}

```

Dynamically I will change the height of some `li` it messed up

See [fiddle](http://jsfiddle.net/nisham/fmusV/33/). Here i am merging selected boxes. Try selecting 4 and 8 you will see the issue.

**screenshot**
![enter image description here](https://i.stack.imgur.com/iN7pM.jpg)

What I need is:

1. I want to fill the empty white spaces with **4** and **5**
2. Selection should be applicable only if boxes has same width(if vertical selection) and only boxes has same height (if horizontal selection)