allineamento div con float o altro

[Yuppies]

Aiuto sto impazzendo con i css.

Allora la questione è questa:

ho un box contenitore largo 380px;
in questo box devono apparire 3 div;
i primi 2 dovranno avere la larghezza pari a 152px e disporsi uno sotto all'altro;
e fin qui tutto ok con il css realizzato
il 3° div dovrebbe disporsi di fianco al primo e questo non mi riesce proprio

Qualcuno può darmi una mano?

Per maggior chiarezza provo a fare un disegnino di ciò che vorrei ottenere:
-------------____--------------
|__________| |___________|
|__________| |___________|
|__1° div___| |__3° div____|
|__________| |___________|
|__________| |___________|
------------- --------------
-------------
|__________|
|__________|
|__2° div___|
|__________|
|__________|
-------------

div#mainContainer{
width:380px;
float:right;
}
#mainContainer div{
float:none;
margin-right:15px;
margin-bottom:10px;
margin-top:0px;
border:1px solid #999;
}
#mainContainer div ul{
margin-left:7px;
}

#mainContainer div p{
margin:0px;
padding:0px;
padding-left:12px;
font-weight:bold;
background-color:#317082;
color:#FFF;
margin-bottom:5px;
background-image: url(/imgi/grad.gif);
}

#mainContainer ul{
width:152px;
height:80px;
border:0px;
margin-bottom:0px;
overflow:hidden;
}

<div id="mainContainer">
<div >

Primo box</p><ul id="1box">[/list]</div>
<div >

Secondo Box</p><ul id="2box">[/list]</div>
<div>

Terzo Box</p><ul id="box6">[/list]</div>
</div>

[stezxx85]

<div id="mainContainer">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="clear"></div>
</div>

il css per posizionarli come vuoi sarà:

#box1{float:left;}
#box2{float:left;}
#box3{float:right;}
#clear{clear:both;}

più tutte le altre regole che ti servono tipo larghezza, sfondo, etc...

Occhio che la somma della larghezza dei box deve essere inferiore a quella del contenitore.

[Yuppies]

grazie per la rapidità del tuo intervento.

ti chiedo:

ma per creare 3 div devo crearne un quarto?

[ResianTaxidrive]

secondo me così non può funzionare, il diuv numero 3 non potrà mai andare più in alto del due (solo con i float).

IO chiuderei il div uno e due in un ulteriore div di larghezza 150px; confloat:left

il terzo invece starà da solo e avrà float:left;

[Yuppies]

Credo che sia come dici tu infatti provando il suggerimento precedente il terzo div si affianca al secondo ma non sale + in alto.

ora provo il tuo suggerimento

[Yuppies]

grazie per i vostri suggerimenti.

ora pare che funzioni

[stezxx85]

Originariamente inviato da ResianTaxidrive
secondo me così non può funzionare, il diuv numero 3 non potrà mai andare più in alto del due (solo con i float).

IO chiuderei il div uno e due in un ulteriore div di larghezza 150px; confloat:left

il terzo invece starà da solo e avrà float:left;

Ah già, non ci avevo più pensato che si allineava col secondo! Maledett flusso! xD