Visualizzazione di elementi in più righe utilizzando i CSS

Question

Ho un contenitore a larghezza fissa <div> che visualizza uno o più widget <div> s. Voglio farlo sembrare come questo:

< - blocchi grigi sono i widget, bordo rosso è il contenitore

semplificato, la mia struttura in HTML simile a questo:

<div id="container"> 
    <div id="widget1">1</div> 
    <div id="widget2">2</div> 
    <div id="widget3">3</div> 
    <div id="widget4">4</div> 
    <div id="widget5">5</div> 
    <div id="widget6">6</div> 
    <div id="widget7">7</div> 
</div> 

Considerazioni

1. I widget avranno un'altezza fissa es. 100px
2. I widget avranno una larghezza fissa, ad es. 100 px ma possono anche essere un multiplo di tale larghezza (più eventuali margini incrociati - vedi widget 1)
3. I widget devono essere distanziati correttamente con un margine (o simile) ad es. 10px
4. Non so quanti widget ci saranno (l'utente può assegnare tanti o pochi come vogliono al contenitore).
5. Il contenitore ha una larghezza fissa ma non ha uno stile "visivo" (il bordo rosso è lì per la dimostrazione)
6. La soluzione deve funzionare nei browser moderni (e MSIE7) e sarebbe idealmente pura CSS.

causa della considerazione 4. Non posso assegnare ulteriori markup esempio riga div, classi (.first-child, .last-child) e causa di 2.:nth-child non funzionano AFAIK.

Le cose che ho provato

margin-left sui widget con :first-child impostazione margin-left: 0 non verrà visualizzata una nuova riga correttamente.

margin-right su widget con :last-child impostazione margin-right: 0 la prima riga forza il contenitore div più largo e last-child isn't supported until MSIE9.

uguali margini sinistro e destro (ad esempio margine: 0 5px 10px) forza nuovamente il contenitore.

overflow - funziona alla grande nella mia testa! Non tanto con margini o padding.

C'è un modo per farlo in CSS?

http://jsfiddle.net/agtb/VHXGT/

Answer 1

Credo che stai pensando troppo complicato :-)

Se ho capito bene non è necessario alcun trattamento speciale dei widget separati. Basta dare ai widget un margine tutto intorno a metà della spaziatura, e il contenitore ha lo stesso margine ma negativo.

#container { 
    width: 440px; 
    margin: -5px; 
} 

#container div { 
    background-color: gray; 
    height: 100px; 
    width: 100px; 
    float: left; 
    margin: 5px; 
} 

Vedi http://jsfiddle.net/SGdG3/1/

Answer 2

contenitore insieme larghezza 400 e la prima div larghezza 200 float a sinistra, riposare larghezza 100 galleggiante lasciato