Float non flottante...

[0-c00l]

Stranamente ho questo problema: Ho assegnato ad un div float: left; ma stranamente l' elemento successivo, che non ha clear come proprietà, va a finire sotto e non accanto..

Questi sono i codici:

CSS:

#container {
width: 900px;
background: white;
margin: 50px auto;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
height: auto;
text-align: justify;
}

#nav-left {
width: 240px;
background: #d7d7d7;
border-right: 1px solid #888;
text-align: justify;
padding: 20px;
float: left;
}

#content {
width: 650px;
}

HTML:

<div id="container" >
<div id="nav-left">
</div><div id="content"><textarea style="width: 80%; height: 100px;" name="message" id="message" onkeyup="caratteri(); conta_ch();">Che ti frulla per la testa?</textarea>

<input type="submit" value="Condividi" name="condividi" /></form>
Nessuno stato trovato. Per crearne uno e condividerlo con i tuoi amici, scrivi qualcosa nello spazio sovrastante e premi Condividi</div></div>

Uno screen: http://i51.tinypic.com/24pcm11.jpg

Nello screen la parte con la foto è la parte flottante..

[blekm]

650 + 240 + 20 (padding) = 910

910 > 900 (width container)

forse per questo ti va di sotto, ma non sono sicuro.

Prova a mettere 600 come width invece di 650

[fcaldera]

va a capo perchè

240 (width)
+ 1 (border)
+ 20 (padding-left)
+ 20 (padding-right)
+ 650 (width)

è maggiore di 900

[0-c00l]

Niente, ho dato 600px come width a content e se provo a scrivere il div con id nav-left dopo il content va a capo nav-left, sembra che ci sia un clear: both invisibile

[fcaldera]

sì ma anche content va messo in float

[0-c00l]

Sì ma se flotto anche content poi il container praticamente scompare, dato che con i float il contenitore non segue l' altezza del contenuto, quindi il contenuto va fuori il container..

[fcaldera]

Originariamente inviato da 0-c00l
Sì ma se flotto anche content poi il container praticamente scompare, dato che con i float il contenitore non segue l' altezza del contenuto, quindi il contenuto va fuori il container..

questo è un altro problema che si risolve con un clearing sul contenitore (sul forum ci sono decine di discussioni a tema)

[0-c00l]

mmm guardando anche questo esempio:

http://www.html.it/articoli/esempi/a.../liquido2.html


Non capisco come risolvere il problema "container alto quanto i float", se mi dai una mano te ne sono grato

[0-c00l]

Il codice aggiornato è:

#container {
width: 900px;
background: white;
margin: 50px auto;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-align: justify;
}

#nav-left {
width: 220px;
background: #d7d7d7;
border-right: 1px solid #888;
text-align: justify;
padding: 10px;
float: left;
display:inline;
border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
-webkit-border-radius: 3px 0px 0px 3px;
}

#content {
width: 600px;
float: left;
background: white;
padding: 10px;
border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
-webkit-border-radius: 0px 3px 3px 0px;
display:inline;
}

Non capisco quel qualcosa che mi manca..