Question

I have some elements I want to display. But sadly it does not work the way I want it.

Here is how it works:
http://jsfiddle.net/lukasoppermann/H3Nmg/7/

I want it so that the red boxes fill the space between the green box and the left side.
It needs to be dynamic though. The width of the container might change and the order of the elements can be different.

I would of course prefer a css-only way, but js is fine too. Does anyone have any tips?

// EDIT
To clarify, the elements cannot be hard-coded or floated to the right, because the number of elements, the width of the wrapper and also the number of green elements can vary. The order of the elements can vary too. I basically need the elements to arrange themselves without any wholes automatically.

Thats what I want.

http://img526.imageshack.us/img526/613/boxsorting.jpg

Answer 1

Hi you can define three div as like this

css

.container{
    float:left;
    margin-left:10px;
}
.top{
    width:100px;
    height:100px;
    background:red;
}


.middle{
    width:100px;
    height:100px;
    background:darkred;
    margin-top:5px;
}
.right{
    width:100px;
    height:200px;
    background:lightgreen;
    float:left;
    margin-left:10px;
}

.bottom{
    float:left;
    width:100px;
    height:100px;
    background:green;
    margin-left:10px;
}

HTML

<div class="container">
    <div class="top"></div>
    <div class="middle"></div>
</div>

<div class="right"></div>

<div class="bottom"></div>
​

Live demo here http://jsfiddle.net/rohitazad/wyvrt/1/
​