wrap div around other divs

Question

I'm trying to do get a div to wrap around 2 other divs. Like this:

Is this possible? I tried with float:left; and have the small divs be display:block; but it didn't work.

Inside each div, I will add pictures:

Answer 1

Something like this:

http://jsfiddle.net/TVCC8/1/

Float the two right containers and keep the large container as a block element. Display the boxes inside the large block element as inline-block.

<div id='wrapper'>
<div id='one'><ul><li></li><li></li></ul></div>
<div id='two'><ul><li></li><li></li></ul></div>
<div id='three'><ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>    
    <li></li>
    <li></li>

 </ul></div>

And the CSS:

ul {list-style-type: none; margin:0; padding:0;}
li { width:20px; height:20px; margin:2px;}
#one {border: 1px solid blue; float: right;}
#one li {background-color: blue;}
#two {border: 1px solid green; float: right;}
#two li {background-color: green;}
#one ul, #two ul {margin:4px 1px 1px 1px;}
#three {border: 1px solid orange;}
#three ul {margin:4px;}
#three li {background-color: orange; display:inline-block; margin:0;}
#wrapper {width:105px;}