How to stack two dynamic sized blocks to be side-by-side?

Question

If I have two blocks with dynamic widths/heights, is there a way to line them up inside a parent element with a fixed width?

SEE: http://jsfiddle.net/QhEYB/

I want the blue/dynamic div to always resize depending on the size of the red element and to not go underneath the red. In other words, for the blue block to be a square block that sits next to the red one.

.wrap {width:600px; }/*static*/
.something {float:left; background:red; width:200px; height:100px;} /*dynamic width/height*/

.somethingelse { background:blue;} /*dynamic width/height and should always be next to .something*/

Thanks!

Answer 1

With the use of display:table and display:table-cell , you should be able to achieve what you want:

.wrap {width:600px; display:table; }/*static*/
.something {display:table-cell; background:red; width:200px; height:100px;} 
.somethingelse { background:blue; display:table-cell;} 

http://jsfiddle.net/QhEYB/3/