CSS - Float child divs around another div

Question

I want to dynamically adjust the width of my child div based on the heights of other child divs. It’s hard to explain, so I’ll just show some photos ...

In this first image, the black square is my “parent” div. It contains other divs with different heights. The blue height of the div is static, but should be moved to the right. The red divs are the ones I'm having problems with. They should automatically adjust their own width if they are under the bottom of the blue div.

The second red div with a small height. See how the last div matches the width of the parent div.

The second red div with a higher height. Now both bottom 2 div widths correspond to the parent div.

One more example...

I am not sure if I should use special positioning or how to structure a div. It will be good if there is a little space under the blue div, I just want to have an equal amount of space between the red divs.

Here is what I created. See the yellow div hiding behind the 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 this using float: right in the blue box and set overflow: hidden in red squares.

Take a look at this jsFiddle for an example.

Answer 2

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 is available here: http://jsbin.com/irubuy/5

Answer 3

If in the source code you add the blue div first and float to the right, this should do what you need / need 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 “problem” I discovered with the violin is that the divs themselves intersect with each other, but the content inside them wraps as it should. I am not sure how this will be displayed when using borders, background colors or background images. Does it help at all?