Problema allineamento CSS

[provoadimparare]

Bungiorno a tutti,

da grande lettrice e usatrice del forum (come visitatore) oggi, mi sono decisa a registrarmi (non trovo uno spazio presentazione).

Come si evice anche dal mio nick, che non ho scelto a caso, sono autodidatta e provo ad imparare qualcosa di questo magico mondo del web.

Vi scrivo perchè ho un qualche problema con un impostazione personalizzata con i CSS del plugin Contact Form 7 di Wordpress.

Ho creato il mio form:

<div id="preventivo">
<div id="quotetitle">1. Tipo Spedizione</div><br />
<hr align=”center” size=”1″ width=”300″ color=”withe” noshade><br />
<label> <img src="immagine"> [radio radio-123 "Merce Sfusa"] </label>
<label> <img src="insert URL of the image"> [radio radio-123 "Bancale/Pallet"] </label> 
<br />

<div id="left">
<div id="quotetitle">2. Luogo di Partenza</div><br />
<hr align=”center” size=”1″ width=”50%″ color=”withe” noshade>
[select* partenza "italia" "francia " "spagna"]
</div>

<div id="right">
<div id="quotetitle">3. Luogo di Destinazione</div><br />
<hr align=”center” size=”1″ width=”50%″ color=”withe” noshade>
[select* partenza "italia" "francia " "spagna"]
</div>

<br />
<div id="infosped">
<div id="quotetitle">4. Informazione Spedizione</div><br /></div>
<hr align=”center” size=”1″ noshade><br />
<div id="left">
<p>Data di Partenza<br />
 [date* partenza date-format:dd/mm/yy]</p>
</div>

<div id="right">
<p>Data di Consegna<br />
[date* consegna date-format:dd/mm/yy]</p><br />
</div>
<br />
<div id="quanti">
<p>Quantità Merce (M²)<br />
[text* quantit]</div></p>
<br />
</div>

al quale ho provato a collegare il mio css

/*Modulo Preventivo*/

#preventivo{
    background-color: #C3D5E8;
    border-radius: 10px;
    border-color:#ff0000 #0000ff;
    widht: 800px;

    padding: 30px 30px 30px;
    z-index: 0;
}

#preventivo #quotetitle {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #CCCCCC;
    color: #313131;
    float: left;
    font-size: 20px;
    margin: 0 0 5px;
    margin-bottom: 12px;
    padding: 0 0 10px;
}

#preventivo #left{
    width: 300px;
    float: left;
}

#preventivo #right{
    width: 300px;
    float: right;
}

#preventivo #infosped{
        width: 550px;
    float: center;
}

#preventivo #quanti{
        width: 450px;
}

#preventivo input[type="text"]{
    border:none;
    font-size :14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
    padding: 5px;
}

ma mi viene tutto disallineato. Sto provando da tre giorni a capirci qualcosa ma non me ne cavo fuori. Quello che mi viene fuori e l'immagine che vi allego dove quantità mere non viene su una riga a se stante ma sovrapposta e tra le due colonne delle date di partenza e arrivo.

Dovrei aggiungre poi altri campi ma se non riesco a configurare questi mi arrendo Dove sbaglio?

1.jpg

[ac_socmel]

aggiungi un clear, dovrebbe funzionare

#preventivo #quanti{
        width: 450px;
       clear: both
}