Affiancare i DIV

[Games]

Ciao a tutti,

non riesco ad affiancare correttamente dei div, devo fare una cosa del genere:

 <div id="content">
  <div id="box1"></div><div id="box2"></div><div id="box3"></div><div id="box4"></div>
  <div id="box5"></div>
  <div id="box6"></div><div id="box7"></div>
 </div>

Il mio css:

div#content
{
 margin-left:200px;
 padding: 1em;
}
div#box1
{
 float: left;
}
div#box2
{
 float: left;
}
div#box3
{
 float: left;
}
div#box4
{
 float: left;
}
div#box5
{
 width: 500px;
}
div#box6
{
 float: left;
}
div#box7
{
 float: left;
}

In pratica vedo i box 6/7 all'esterno del content e il box 5 che parte da dove parte il box 1/2/3/4 anzichè partire da sotto questi 4 box.

Suggerimenti?
Thanks

[ResianTaxidrive]

i box 6,7 ti sembrano fuori dal content perchè questi 2 sono float e il content non li "vede"; devi mettere float anche il content oppure mettere un div senza float dopo il 7.
Il 5 parte dal punto più in alto a sx perchè essendo senza float quello è il primo posto disponibile. I primi 4 div con il float è come se fossero su un altro piano rispetto a chi non ha il float; immagina di vedere tutti i div con il float a 10cm dal piano di un tavolo menre che non ha il float è appoggiato al tavolo. Questi due livelli fra di loro non si vedono.

[Games]

Originariamente inviato da ResianTaxidrive
i box 6,7 ti sembrano fuori dal content perchè questi 2 sono float e il content non li "vede"; devi mettere float anche il content oppure mettere un div senza float dopo il 7.
Il 5 parte dal punto più in alto a sx perchè essendo senza float quello è il primo posto disponibile. I primi 4 div con il float è come se fossero su un altro piano rispetto a chi non ha il float; immagina di vedere tutti i div con il float a 10cm dal piano di un tavolo menre che non ha il float è appoggiato al tavolo. Questi due livelli fra di loro non si vedono.

OK, faccio qualche prova ma dovrei aver risolto =)

[Games]

Originariamente inviato da ResianTaxidrive
i box 6,7 ti sembrano fuori dal content perchè questi 2 sono float e il content non li "vede"; devi mettere float anche il content oppure mettere un div senza float dopo il 7.
Il 5 parte dal punto più in alto a sx perchè essendo senza float quello è il primo posto disponibile. I primi 4 div con il float è come se fossero su un altro piano rispetto a chi non ha il float; immagina di vedere tutti i div con il float a 10cm dal piano di un tavolo menre che non ha il float è appoggiato al tavolo. Questi due livelli fra di loro non si vedono.

Se metto il clear: both al box5 lo sposta in basso finchè non finisce il div navigation che è fuori dal content e ha il float a sinistra.

<div id="container">
 <div id="header"></div>
 <div id="navigation"></div>
 <div id="content">qui dentro ho i miei box da affiancare</div>
 <div id="footer"></div>
</div>

In questo modo tra i primi 4 box e il box5 ho tanto spazio quanto è alto il div navigation.
Il css.

div#content
{
 margin-left:200px;
 padding: 1em;
 border-style: solid;
 border-width: 1px;
}

div#navigation
{
 float:left;
 width: 200px;
 margin-top: 10px;
}

Dove sbaglio?
Thanks =)

[ResianTaxidrive]

no il clear non lo devi mettere al box 5 ma a un div vuoto che ti serve solo per applicarci il clear.

Adesso non ho capito bene se hai modificato rispetto alla prima versione, cmq perchè il box 5 non ha il float?

[Games]

Originariamente inviato da ResianTaxidrive
no il clear non lo devi mettere al box 5 ma a un div vuoto che ti serve solo per applicarci il clear.

Adesso non ho capito bene se hai modificato rispetto alla prima versione, cmq perchè il box 5 non ha il float?

Perchè il box 5 deve stare sotto i box 1/2/3/4

Quindi ho messo il float ai box 1/2/3/4/6/7 il clear al box 5/8

<div id="content">
 <div id="box1"></div>
 <div id="box2"></div>
 <div id="box3"></div>
 <div id="box4"></div>
 <div id="box5"></div>
 <div id="box6"></div>
 <div id="box7"></div> 
 <div id="box8"></div>
</div>

In questo modo vedo il content allungarsi fino al box 8 che ha solo un clear: both.
Di contro mettendo il clear: both al box5 per farlo andare sotto al box 1/2/3/4 si crea uno spazio alto quanto il navigation che puoi vedere nel post precedente.

Potrei risolvere applicando un float right al content oppure mettendo in position relative il navigation ( devo fare delle prove )

[ResianTaxidrive]

non capisco perchè non metti il float a tutti quanti.

Se metti un clear basta uno, dopo il div#8 metti un div vuoto a cui applichi il clear.

Ho la sensazione che tu ti stia complicando la vita...