Layout a tre colonne con i float

[Pacio88]

Ho tentato di costruire un layout a tre colonne con la tecnica dei float, tuttavia ho un problema nella visualizzazione della colonna centrale che mi si presenta più alta delle due adiacenti, ovvero dove finisce questa iniziano le altre, sarei grato se qualcuno sapesse darmi delucidazioni in merito. GRAZIE

[fre2004]

crea un div contenitore.

poi crei tre div, le tre colonne, tutte con float;left e width: 200px.

poi aggiungi margin-left:20px;

ovviamente le misure sono per esmpio.

[Pacio88]

Ho provato come dici ma non ci riesco, vi dico come avevo fatto..avevo racchiuso tre div dentro un div contenitore di larghezza fissa..poi i tre div avevano un attributo id collegato a un foglio di stile in cui veniva espresso il valore float:righ a un div e left ad un altro..quello centrale era privo di attributo float, spero di essermi spiegato..

[^EvAmPiReS^]

Secondo me qui
trovi la soluzione al tuo problema...

[fre2004]

è il centrale il problema perche non ha il float.

allora fai,

il div a sinistra float left, il centrale float left, e quello a destra float right.

devi fare attenzione alle dimensioni di tutti i div


se il contenitore e troppo piccolo, i 3 div non si allineano.

[Pacio88]

Sccusate ma non riesco a risolvere il problema, vi mostro quello che ho scritto su css..

/* Barra Laterale */
div#barra_latele{float:left; margin: 0px 500px 0px 200px;
width:260px
}

/* Sezione Extra */
div#sezione_extra{float:right;
width:200px;
}

/* Contenuto */
div#contenuto{float:left;
width:500px;
}

Tenete di conto che vorre si posizionassera in questo ordine(partendo da sinistra) contenuto-barra leterale-sezione extra...Ho provato anche a non dare nessun attributo float alla sezione centrale,ovvero alla barra laterae, ma senza nessun risultato..

[fre2004]

Originariamente inviato da Pacio88
Sccusate ma non riesco a risolvere il problema, vi mostro quello che ho scritto su css..

/* Barra Laterale */
div#barra_latele{float:left; margin: 0px 500px 0px 200px;
width:260px
}

/* Sezione Extra */
div#sezione_extra{float:right;
width:200px;
}

/* Contenuto */
div#contenuto{float:left;
width:500px;
}

Tenete di conto che vorre si posizionassera in questo ordine(partendo da sinistra) contenuto-barra leterale-sezione extra...Ho provato anche a non dare nessun attributo float alla sezione centrale,ovvero alla barra laterae, ma senza nessun risultato..

sto css è tutto sbagliato, dai un margine di 500px, mi sembra un po troppo.

ti posto il codice di quello che vuoi,

<div id="main" style="margin:0 auto; width:1000px; height:100%; overflow:hidden ">

<div id="contenuto" style="width:500px; float:left">div contenuto</div>
<div id="barra_laterale" style="width:200px; float:left; margin-left:20px">div contenuto</div>
<div id="sezione_extra" style="width:200px; float:left;margin-left:20px">div contenuto</div>

</div>

[Akito]

Leggi qui, ho postato la soluzione per un altro utente.
Il post ha codice html e css.

http://forum.html.it/forum/showthrea...readid=1162946

Ciao
Akito

[Pacio88]

<div id="main" style="margin:0 auto; width:1000px; height:100%; overflow:hidden ">

<div id="contenuto" style="width:500px; float:left">div contenuto</div>
<div id="barra_laterale" style="width:200px; float:left; margin-left:20px">div contenuto</div>
<div id="sezione_extra" style="width:200px; float:left;margin-left:20px">div contenuto</div>

</div>

[/QUOTE]

Perchè se ad esempio cancello questa parte:

style="margin:0 auto; width:1000px; height:100%; overflow:hidden "

e la riscrivo in un foglio di stile esterno non ho lo stesso risultato?..

[Pacio88]

Non è possibile fare altrettanto con un foglio di stile esterno?..