Comment faire pour envelopper les éléments div autour d'un autre élément div

Question

Cela doit être une question souvent répondu, mais mon google-foo échoue moi. Jetez un coup d'oeil au schéma assez:

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

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

Il représente un conteneur dans lequel il y a un div de navigation, un div sidebar et beaucoup de petits contenant des images et divs texte. Ce que j'essaye de réaliser est, peu importe la hauteur de la barre latérale, les divs d'image apparaîtront dans de belles rangées avec autant de colonnes dans une rangée donnée qui s'adaptera. Ils vont bien emballer sous la barre latérale. J'ai essayé un million de façons différentes, mais les divs d'image commencent soit au-dessous du bas de la barre latérale, soit la rangée 2 aura 3 divs et ensuite un quatrième, poussé vers le bas par la barre latérale.

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

Est-ce que quelque chose me manque? Est-ce possible et, si oui, comment?

Answer 1

Que pensez-vous de cela?

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

L'idée sous-jacente est que vous voulez flotter la barre latérale (placez-le sur le flux). La barre de navigation et l'élément factice doivent être des éléments de bloc dans le flux (suivant le flux, mais avec un saut de ligne avant) et les images doivent être des éléments en ligne dans le flux (remplir le reste de la page comme le ferait le texte).

Code HTML Source:

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

Code Source CSS:

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

PS. Je l'ai fait avec des tags IMG mais vous pouvez tout aussi bien utiliser des DIVs.

---

Mise à jour: Pour que les éléments d'image à blocs dans leur propre droit dans lequel vous pouvez utiliser la mise en page, etc., vous pouvez utiliser display: inline-block au lieu de ligne pour les éléments de type i1:

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

Cela fonctionne parfaitement sur mon Chrome, mais vous se déroulera dans quelques cross-browser issues pour IE et Firefox 2. Toutefois, ces problèmes peuvent être résolus en suivant these ou these directives.