Allineamento DIV

[NeverNighter]

Salve ragazzi, innanzitutto siete un sito davvero utile e incredibile, le vostre guide sono davvero di facile comprensione ed ho tratto molto loro.
Allora, ho un problema davvero bastardo se posso cosi dire.
Sto facendo un sito per un negozio online ed ho incontrato un problema con l'allineamento dei tag DIV, in pratica vorrei che il banner per la pubblicità sia sotto al menù ma non riesco a metterlo li, aiutatemi vi prego è urgentissimo, possibilmente senza JavaScript, questo è il codice con i css:



<div>title che occupa tutta la pagina in lerghezza</div>
<div style="float:left">menù che occupa un 20% a sinistra della pagina</div>
<div>pubblicità CHE DOVREBBE STARE SOTTO al menù occupante lo stesso spazio in larghezza</div>
<div style="float:left">contenuti che occupa il restante 80% di larghezza a destra della pagina e che in altezza dovrebbe essere uguale all'altezza del menù e della pubblicità insieme (se servisse come informazione: non posso mettere float:right per altri motivi)</div>
<div>footer che occupa tutta la larghezza della pagina sotto a tutto il resto</div>

In pratica il sito dovrebbe avere un aspetto simile a questo:
--------------------------------------------
|................................................. ..........|
|.....................Titolo...................... ........|
|................................................. ..........|
--------------------------------------------
|....................|............................ ..........|
|....................|............................ ..........|
|......Menù.......|............................... .......|
|....................|............................ ..........|
|....................|............................ ..........|
----------------............Contenuti..............|
|....................|............................ ..........|
|....................|............................ ..........|
|...Pubblicità....|............................... ........|
|....................|............................ ..........|
--------------------------------------------
|................................................. ..........|
|...................Footer........................ .......|
--------------------------------------------

Ed invece il problema è che il DIV della pubblicità si mette sopra a quello dei contenuti, cosi:

--------------------------------------------
|................................................. ..........|
|......................Titolo..................... .........|
|................................................. ..........|
--------------------------------------------
|....................|....................|
|....................|....................|
|......Menù.......|...Pubblicità....|
|....................|....................|
|....................|....................|
|.....................---------------
|.....................|........................... ...........|
|.....................|........................... ...........|
|.....................|...........Contenuti....... .......|
----------------|......................................|
|......................................|
|......................................|
|......................................|
---------------------------------------------
|................................................. ...........|
|................Footer........................... .........|
|................................................. ...........|
---------------------------------------------

[Francis87]

Il problema e' che aggiungi float al menu ed al contenuto. Cosi' facendo li togli dal normale flusso (flow) della pagina.

Usando float, dovresti avere un elemento con clear="both" al di sotto degli elementi con float, per ristabilire il normale flusso. Prova ad aggiungere un <br style="clear: both;" /> sopra il footer per vedere cosa succede.

Per il tuo problema:

<div>title</div>
<div style="float:left">
  <div>menù</div>
  <div>pubblicità</div>
</div>
<div style="float:left">contenuti</div>
<br style="clear: both;" />
<div>footer che occupa tutta la larghezza della pagina sotto a tutto il resto</div>

[NeverNighter]

Ho provarto come dici e non funziona, anche perché tutta la faccenda non c'entra niente con il footer o con la sua posizione, posso anche eliminarlo il footer... ed anche il content... il DIV della pubblicità se ne va sempre a fianco a quello del menù invece di andarli sotto!!! Ho provato ad aplicare il clear:both, clear:left e clear:right dovunque ma il problema rimane sempre li... il DIV della pubblicità non ne vuole sapere di posizionarsi al di sotto del DIV menù.
Però, provando a racchiudere i due DIV menù e pubblicità all'interno di un altro DIV con proprietà float:left il DIV della pubblicità finalmente sembra mettersi sotto al DIV menù, dico sembra perché in effetti in tutti i browser rimane sotto ad eccezione di IE7 con il quale torna lo stesso problema anche con questa tecnica. IE6 invece è escluso completamente dal sito per cui non mi preoccupo affatto della visualizzazione su IE6. Insomma spero che ci sia una tecnica per farlo rimanere sotto quel DIV della pubblicità bastardo. Aiutatemi a trovare la soluzione please.

[NeverNighter]

up