CSS - Float child divs around other div - css

Question

I want to dynamically adjust the width's of my child div's based on the heights of the other children div. It's hard to explain, so I'll just show some pictures...
In this first image, the black square is my "parent" div. It contains other divs with varying heights. The blue div's height is static, but must be floated to the right. The red div's are the ones I am having problems with. They should automatically adjust their own width if they occur below the bottom of the blue div.
The second red div with a small height. See how the last div fits the width of the parent div.
The second red div with a larger height. Now both the bottom 2 div's widths fit the parent div.
One more example...
I am not sure if I should be using special positioning, or how to structure the div's. It will be fine if there is a bit of space below the blue div, I just want to have an equal amount of space between the red div's.
Here is kinda what I have set up. See the yellow div's are hiding behind the right blue div: http://jsfiddle.net/MVzHS/1/
#floatRight {
width: 100px;
height:200px;
background-color:blue;
position: absolute;
right:10px;
top:10px;
}
Solution: http://jsfiddle.net/MVzHS/3/

Answer 1

You can do it by using float: right on the blue box and setting the overflow: hidden on the red boxes.
Check out this jsFiddle for an example.

Answer 2

If in the source you add the blue div first and float it right, this should do what you want/need it to do?
.black {
width:958px;
padding:10px;
border:1px solid #000;
float:left;
}
.blue {
width:248px;
height:400px;
border:1px solid #00f;
float:right;
margin:0 0 10px 30px;
}
.red {
border:1px solid #f00;
margin:0 0 10px;
}
http://jsfiddle.net/seemly/BTxgJ/
The only "issue" I found with the fiddle provided is that the divs themselves kind of intersect each other, but the content within them wrap as they should. I am unsure how this will display if using borders, background colours or background imagery. Does this help at all?

Answer 3

HTML
<div id="parent">
<div id="blue">Blue content here</div>
<div id="red">Red 1 content here
<br>more content
<br>more content
<br>more content
<br>more content
<br>more content</div>
<div id="red">Red 2 content</div>
<div id="red">Red 3 content</div>
</div>
CSS
#parent
{
border: 1px solid black;
height: 100%;
}
#blue
{
float: right;
border: 1px solid blue;
height: 100px;
margin-left: 10px;
}
#red
{
border: 1px solid red;
overflow: hidden;
margin-bottom: 10px;
}
JS Bin available here: http://jsbin.com/irubuy/5