How to wrap div elements around another div element

Question

This should be a frequently asked question, but my google-foo does not suit me. Take a look at the beautiful chart:

  + ------------ + + - +
 |  nav |  |  |
 + ------------ + | s |
 + - + + - + + - + | i |
 |:) |  |:) |  |:) |  | d |
 + - + + - + + - + | e |
                |  |
 + - + + - + + - + |  |
 |:) |  |:) |  |:) |  |  |
 + - + + - + + - + + - + 

 + - + + - + + - + + - +
 |:) |  |:) |  |:) |  |:) |
 + - + + - + + - + + - +

It is a container in which there is a div for navigation, a sidebar div and many small divs containing images and text.

What I'm trying to achieve, regardless of the height of the sidebar, the div div will appear in nice rows with as many columns in the given row as it matches. They will be beautifully wrapped under the side panel.

I tried a million different ways, but div divs of images start below the bottom of the sidebar, otherwise line 2 will have 3 divs, and then the fourth one shifted in the sidebar.

  + ------------ + + - +
 |  nav |  |  |
 + ------------ + | s |
 + - + + - + + - + | i |
 |:) |  |:) |  |:) |  | d |
 + - + + - + + - + | e |
                |  |
 + - + + - + + - + |  |
 |:) |  |:) |  |:) |  + - +
 + - + + - + + - + + - +
                |: (|
                + - +
 + - + + - + + - + + - +
 |: (| |: (| |: (| |: (|
 + - + + - + + - + + - +

Am I missing something obvious? Is this possible, and if so, how?

Answer 1

How about this?

http://jsfiddle.net/antiflu/kwvcZ/

The idea is that you want to float the sidebar (put it out of the stream). The navigation bar and the dummy element must be block elements in the stream (after the stream, but with a line break before), and images should be inline elements of the stream (filling the rest of the page like text).

Download Source Package html:

<img class="sidebar" src="http://dummyimage.com/123x340"> <img class="nav" src="http://dummyimage.com/340x123"> <div class="break">Dummy</div> <img class="i1 top1" src="http://dummyimage.com/100x100"> <img class="i1" src="http://dummyimage.com/100x100"> (etc...) 

Download Source Package css:

 img.nav {float: left;} img.sidebar {float:right;} div.break {clear: left;} img.i1 {display:inline; padding: 5px;} 

PS. I did this with IMG tags, but you can also use DIV.

---

Refresh . To make image elements themselves blocks, in which you can use layout, etc., you can use display: inline-block instead of the built-in for elements of type i1:

http://www.jsfiddle.net/antiflu/nqNeZ/

This works neatly in my Chrome, but you will encounter several cross-browser issues for IE and Firefox 2. However, these problems can be resolved by following these or these recommendations.