problema layout due colonne con float (guida layout di html.it)

[blekm]

guardate la pagina di sopra con IE e con FF.

http://blekm.altervista.org/lay1.html

su IE appare come voglio io, ma su FF no.. so che FF intepreta meglio le regole css, quindi sto cercando una soluzione per ottenere lo stesso risultato su entrambi i browser..

codice css:

html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#box{width: 760px;margin: 0 auto;text-align: left;
    border-left: 1px solid #36c;border-right: 1px solid #36c}

div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

div#navigation{float: left; width: 10em;}
div#content{padding: 10px; float: right;}
div#footer{clear:right; text-align:center; padding: 0.5em;
    background-color: #69c; color: #000}

div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}

Questa pagina l'ho ottenuta prendendo spunto da qua

http://css.html.it/guide/lezione/68/...-con-il-float/

la pagina spiegata nel link qua sopra è questa:

http://html.it/guide/esempi/layout_css/esempio19b.htm

io vorrei ottenere lo stesso effetto, ma con il menu a sinistra invece che a destra.. ma non riesco a farlo..

una mano per modificare il codice di sopra?..

[Another-Life]

div#content{
padding: 10px;
float: left;
}

[blekm]

avevo provato, non funziona...

eccoti uno screenshof di FF.. IE nemmeno te lo metto, deve funzionare su IE , poi vediamo di aggiustarlo su IE..

[Another-Life]

Da quanto vedo nel Css originale la sezione content non è stata dichiarata con nessuna proprietà float: valore; ^^

[blekm]

Originariamente inviato da Another-Life
Da quanto vedo nel Css originale la sezione content non è stata dichiarata con nessuna proprietà float: valore; ^^

lo so, ma se lo lascio come nell'originale mi ritrovo questo:



io vorrei ottenere lo stesso effetto dell'originale, ma con la navigazione a sinistra...

[erredeco]

Se non dai una dimensione a div#content, questo di default occupa il 100% dello spazio disponibile ed è per questo che va a capo.

P.S.
E' inutile che scrivi nel css

div#content

e così via per tutti gli altri...visto che non puoi avere 2 elementi con lo stesso ID, tanto vale scrivere direttamente

#content

[blekm]

Originariamente inviato da erredeco
Se non dai una dimensione a div#content, questo di default occupa il 100% dello spazio disponibile ed è per questo che va a capo.

allora spiegami perchè nell'esempio da dove sono partito #content non "invade" a destra sotto la colonna di navigazione?

http://html.it/guide/esempi/layout_css/esempio19b.htm


visto che content non ha specificata la dimensione...
http://html.it/guide/esempi/layout_c...hp?css=2cfbase

o forse mi sfugge qualcos'altro?

[erredeco]

Non ho tempo di fare un'analisi approfondita, ma credo che il trucco stia tutto qui:

div#navigation{float:right;width: 13em}

div#content{margin-right: 13em;padding: 1em}

Direi che viene dato un margine sufficiente a "scavare" il posto dove inserire il #navigation.

[blekm]

Originariamente inviato da erredeco
Non ho tempo di fare un'analisi approfondita, ma credo che il trucco stia tutto qui:

div#navigation{float:right;width: 13em}

div#content{margin-right: 13em;padding: 1em}

Direi che viene dato un margine sufficiente a "scavare" il posto dove inserire il #navigation.

ottima osservazione, ho risolto cosi:

div#navigation{float: left; width: 13em;}
div#content{margin-left: 13em;padding: 1em;}

grazie mille!

[thomas_anderson]

[OT] blekm, ti giuro, comincio a credere che sia più semplice rimuovere virus!
almeno per noi vecchi...