How to wrap div elements around another div element

Question

This must be an oft-answered question, but my google-foo fails me. Take a look at the pretty diagram:

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

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

It represents a container in which there's a nav div, a sidebar div and lots of little divs containing images and text.

What I'm trying to achieve is, no matter the height of the sidebar, the image divs will appear in nice rows with as many columns in a given row as will fit. They'll nicely wrap under the sidebar.

I've tried a million different ways, but the image divs either start below the bottom of the sidebar or else row 2 will have 3 divs and then a fourth, pushed down by the sidebar.

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

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

Answer 1

How about this?

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

The idea behind it is that you want to float the sidebar (place it out of the flow). The nav bar and the dummy item should be block elements in the flow (following the flow, but with a line break before) and the images should be inline elements in the flow (filling up the rest of the page like text would).

Source code 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...)

Source code CSS:

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

PS. I did it with IMG tags but you can just as well use DIVs.

---

Update: In order for the image elements to be blocks in their own right in which you can use layout etc. you can use display: inline-block instead of inline for the i1-type elements:

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

This works neatly on my Chrome, but you will run into a couple of cross-browser issues for IE and Firefox 2. However those issues can be tackled by following these or these guidelines.