Due gruppi "div" in due "foat: left"

[Vincent.Zeno]

Ho un problema con due gruppi di "div": il primo gruppo costituisce il menu <div id="hormenu">
che è formattato per conto proprio con css,
il secondo <div id="corpo"> appartiene al contenuto della pagina

Per formattare il primo div ho usato l'istruzione foat: left e tutto va bene.
Il problema è che si tira dietro anche i div del contenuto della pagina.
Insomma, vorrei che il secondo gruppo sia staccato dal primo;
ma non riesco a separali sebbene abbiano nomi differenti.
Che fare?

/* Stili menu orizzontale */
div#hormenu {
float: left;  
margin: 0; 
padding: 0;
border-top: 1px solid black;
background: #990000;
}
div#hormenu ul {
margin: 0;
padding: 0;
font-family: times;
font-weight: bold;
font-size: 100%;
}
div#hormenu li  {
float: left;
margin: 0;
padding: 0;
border: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
color: black;
}
div#hormenu a {
display: block;
padding: 5px;
color: #FFFFFF;
text-decoration: none;
}
div#hormenu a:hover {
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
}
div#hormenu li ul {display: none}
div#hormenu li:hover ul {
position: absolute;
display: block;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border: 1px solid black;
background: #990000;
}
div#hormenu li li {border: none; width: 150px;}	
div#hormenu li li a {padding: 2px 2px 2px 10px;}

/* Stili corpo della pagina */
div#corpo {
float: left;
}

[VanessaInfo]

penso ke dando una width al menu e al corpo la cui somma sia minore del 100% potrebbe essere una soluzione!

VaneX

[Vincent.Zeno]

...uhmm: dalla tua risposta capisco che ho posto male la questione.

Il primo div menu fa il suo lavoro, e non ho impostato larghezze in modo che si adatti automaticamente al contenuto.

Il secondo div (che in realtà sono tre, e li tengo allineati per conto loro) deve tornare a capo e non proseguire sulla "scia" del precedente.
Come se fossero due paragrafi..

[VanessaInfo]

ops...avevo capito male, scusa

VaneX

[VanessaInfo]

forse

display : block;

VaneX

[Vincent.Zeno]

no, non funziona...
ho provato in entrambi i div

[Manu]

credo tu debba usare nel secondo div (quello dei contenuti )la proprietà

clear: left;

che (in parole povere) permette al div di non avere altri elementi alla sua sinistra;

esistono anche:

clear: right;

e

clear: both;

prova un po....

[Vincent.Zeno]

Purtoppo non funziona come vorrei:
tutti i div successivi si incolonnano anzichè rimanere allineati.

Ma credo di non avere speranze:
http://www.w3schools.com/css/pr_class_clear.asp

:master:

[Manu]

Se mi mandi sia il codice che il css completo provo a smanettarci un po su....oppure se riesci a mettere un link che rimenda alla pagina in questione sarebbe meglio.

Magari se ne viene a capo...

[Vincent.Zeno]

http://www.creazionespettacoli.net/index_prova.asp
visualizza senza "preferiti" e vedrai la questione...
Per ora ho risolto inserendo i div in una tabella (non nell'esempio),
ma vorrei slegarmi dalla tabella, se possibile.
Il problema può essere risolto anche tenendo al 100% la larghezza del menu: ma poi si vede e non lo voglio.
Grazie; se riuscirai a tirar fuori qualcosa ti mando

CODICE CSS

 
/* Stili link */
a:link     {text-decoration: none}
a:link     {color: #FFFF00}
a:visited  {color: #FFFF00}
a:hover    {
           color: #FFFFFF;
           background-color: #FF0000;
           font-weight: bold;
           }
a:active   {color:blue}
a {text-decoration: none}

/* Stili caratteri */
h1 {font-size: 18px}
h1 {font-family: charlesworth times}
h1 {color: #FF0000}
h2 {font-size: 130%}
h2 {font-size: 130%}
p {font-size: 100%}
p {color: #FFFFFF}

/* Stili sfondo e scrollbar */
body  {
background-color: #000000;
scrollbar-base-color: #000000; 
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #FF3300;
scrollbar-shadow-color: #0000CC;
}

/* Stili menu orizzontale */
/* omesso width: 100%; */

div#hormenu {

float: left; 
margin: 0; 
padding: 0;
border-top: 1px solid black;
background: #990000;
}
div#hormenu ul {
margin: 0;
padding: 0;
font-family: times;
font-weight: bold;
font-size: 100%;
}
div#hormenu li  {
float: left;
margin: 0;
padding: 0;
border: 1px solid black;
border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
color: black;
}
div#hormenu a {
display: block;
padding: 5px;
color: #FFFFFF;
text-decoration: none;
}
div#hormenu a:hover {
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
}
div#hormenu li ul {display: none}
div#hormenu li:hover ul {
position: absolute;
display: block;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border: 1px solid black;
background: #990000;
}
div#hormenu li li {border: none; width: 150px;}	
div#hormenu li li a {padding: 2px 2px 2px 10px;}

/* Stili div corpo */
div#corpo {
float: left;
border: 1px solid white;
}

CODICE PAGINA (nel body)

 
    <div id="corpo" align="center" style="width: 33%; height: 100%">
    <p align="center"><font color="#FFFFFF">AAAAAA</font>
    <p align="center"><font color="#FFFFFF">gfg</font>
    <p align="center"><font color="#FFFFFF">dg</font>
    </div>
    <div id="corpo" style="width: 33%; height: 100%">
    <p align="center">
    <font color="#FFFFFF">BBBBBBB</font>
    <p align="center">
    [img]../Immagini/Barbie.jpg[/img]
    <p align="center">
    hhhhh
    </div>
    <div id="corpo" style="width: 33%; height: 100%">
    <p align="center">
    <font color="#FFFFFF">CCCCCC</font>
    </div>