html - CSS - Float child divs around other div -

html - CSS - Float child divs around other div -

i want dynamically adjust width's of kid div's based on heights of other children div. it's hard explain, i'll show pictures...

in first image, black square "parent" div. contains other divs varying heights. bluish div's height static, must floated right. reddish div's ones having problems with. should automatically adjust own width if occur below bottom of bluish div.

the sec reddish div little height. see how lastly div fits width of parent div.

the sec reddish div larger height. both bottom 2 div's widths fit parent div.

one more example...

i not sure if should using special positioning, or how construction div's. fine if there bit of space below bluish div, want have equal amount of space between reddish div's.

here kinda have set up. see yellowish div's hiding behind right bluish 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/

you can using float: right on bluish box , setting overflow: hidden on reddish boxes.

check out jsfiddle example.

css html css-position