Div - CSS Moving Problem

I got a problem..

Just imagine, that I got 6 divs 开发者_高级运维in THIS order:

DIV1,DIV2,DIV3,
DIV4,DIV5,DIV6

so.. I built a Jquery script, which allows me, to move one of the Divs away.. example: I can move DIV2 away and then it looks like this:

DIV1,DIV3,DIV4               DIV2 (anywhere out)
DIV5,DIV6

and this is my problem.. I dont want, that all divs move one up, I would like something like this:

DIV1,    ,DIV3               DIV2 (anywhere out)
DIV4,DIV5,DIV6

the css of one Div:

float:left;
height:20px;
width:20px; 
border:1px solid white;
position: absolute;

background-color:Gray;
border: 1px solid WHite;

hope u guys can help me :(

In order to get this working the way you'd like I think you'd have to position each box absolutely with a fixed position.

So each box would have to have something like:

#Box1{
position:absolute;
top:0;
left:0;
}

#Box2{
position:absolute;
top:0;
left:150px;
}

Another option would be to have each of the 4 boxes inside a container that doesn't move. I'll put together a quick demo.

UPDATE

Here's a demo of using a container div to keep the position: http://jsfiddle.net/fv2WQ/

You can use jQuery to dynamically set the top and left properties of each .box:

http://jsfiddle.net/nSdpe/

$('.box').each(function() {
    var pos = $(this).position();
    $(this).css({
        top: pos.top,
        left: pos.left
    });
}).css({
    position: 'absolute'
});

I would put the divs in a wrapper which would serve as a placeholder.

.wrapper{
float:left;
height:20px;
width:20px; 
padding:0px;
}

.content{
height:20px;
width:20px; 
border:1px solid white;
position: absolute;
background-color:Gray;
}

and then just place content in the wrapper

<div class="wrapper">
  <div class="content">
  </div>
</div>

But yeah, without more code it's hard to tell what will work and what won't.