Formattato ma..non allineato

[provoadimparare]

Ciao a tutti, sto provando a mettere in pratica le mie conoscenze per realizzare il form che vedete in questa pagina assicur.servizieweb.it/lavora-con-noi/ ma come potete vedere è tutto sfasato, mi manda a capo la sidebar.

Dove sbaglio?

/*Preventivo*/    
    
#merce img,#pallet img {
    float: left;
}


@media screen and (max-width: 959px) {
        
        .entry-content img { width: auto !important; }
    }
    
#merce {
    float: left;
    width: 160px;
}
#pallet {
    display: block;
    height: 30px;
}
.blocco1 {
display: block;
margin-bottom: 12px;
}
.fixxyzz {
    margin-top: -25px;
}
#bsinistra {
    float: left;
    display: block;
    padding: 9px;
    margin-left: 0px;
}
#bdestra {
    float: left;
    display: block;
    padding: 9px;
    margin-left: 1%;
}
#infosped {
    display: block;
    margin-top: 15px;
}
#bdestra select {
    margin-top: -25px;
}

#bleft {
    float: left;
    display: block;
    margin-right: 2%;
}

#quanti {
    float: left;
    display: block;
    margin-right: 2%;
}

#sleft {
float: left;
margin-right: 2%;
}

#quotetitle{
    color: #313131;
    float: left;
    font-size: 17px;
    line-height: 20px
}

#preventivo input[type="text"]{
    background-color: #6893C8;
    border: medium none;
    border-radius: 12px;
    color: #FFFFFF;
    padding: 5px 10px;
}

#preventivo input[type="email"]{
    border:none;
    border:1px solid #000;
    font-size :14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
}

#preventivo input[type="select"]{
    border:none;
    border:1px solid #000;
    font-size :14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
}

@media screen and (max-width: 730px) {
  #bleft,#quanti,#sleft, {
float: none !important;
}      
     
    }
     
@media screen and (max-width:699px) { 
#infosped {
display: block;
margin-top: 257px !important;
}
       
    }
    
    .blocco1,#bsinistra,#bdestra, #infosped,.ultimox {
    background-color: #F7F8F9;
    border: 1px solid #88acd3;
    border-radius: 15px;
    padding: 16px;
}

.ultimox {
margin-top: 12px;
}

#bsinistra {
    width: 44.3%;
}
#bdestra {
    width: 44.3%;
}
#bdestra selec {}
#bdestra select {
    width: 100%;
}
#bsinistra select {
    width: 100%;
}

/* Flexible iFrame */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

dove i riferimenti sonoù

<div id="preventivo">
<div class="blocco1">
<div id="quotetitle">1. Portafoglio Clienti</div><br />
<hr align=”center” size=”1″ width=”300″ color=”withe” noshade><br />
<div id="merce"><label> [radio radio-123 "Settore Assicurativo"] </label></div>
<div id="pallet"><label> <img src="insert URL of the image"> [radio radio-123 "Altro"] </label></div>
</div>
<br />
<div id="infosped">
<div id="quotetitle">2. Informazione Personali</div><br />
<hr align="center" size="”1″" noshade="" ><br />
<div id="bleft">
<p>Nome*</p><br />
 [text* nome]
</div>
<div id="bright">
<p>Cognome*</p><br />
[text* cognome]<br />
</div>
<div id="quanti">
<p>Telefono*</p><br />
[text* telefono]
</div>
<div id="tipomer">
<p>Email*</p><br />
[text* email]
</div>
</div>
<div class="ultimox">
<div id="quotetitle">3. Informazioni Operative</div><br />
<hr align=”center” size=”1″ width=”50%″ color=”withe” noshade>
<div id="sleft">
<p>Provincia di Competenza</p><br />
[text provinciacomp]
<p>Partita Iva</p><br /> 
[text* piva]</div>
<div id="sright">
<p>Partita Iva*</p><br /> 
[text* piva]</div>
<p>Partita Iva*</p><br /> 
[text* piva]</div>
</div>
</div>
[submit]
</div>

Grazie a coloro i quali vorranno aiutarmi

[provoadimparare]

Nessuno che possa aiutarmi?

Grazie e buona serata

[ac_socmel]

passa prima al validatore del w3c
intanto studia meglio la differenza tra classe e id
poi usa un editor che faccia le virgolette dritte/normali

[Prill]

inoltre: perché creare tante regole e inserire div che condividono le stesse impostazioni con id diversi?

Con firefox non vedo la barra laterale a capo ma gli input che escono fuori dal blocco centrale e vanno a sovrapporsi a quella. Semplificando:

html

<div><form ...>

<div id="preventivo">

<div class="campi">
<div class="quotetitle">1. Portafoglio Clienti</div>
<div class="left">
<label>Settore Assicurativo</label>
<input ...>
</div>
<div class="right">
<label>Altro</label>
<input ...>
</div>
<div style="clear:both"></div>
</div>

<div class="campi">
<div class="quotetitle">2. Informazione Personali</div>

<div class="left">
<label>Nome*</label>
<input ...>
</div><!-- fine left -->
<div class="right">
<label>Cognome*</label>
<input ...>
</div><!-- fine right -->
<div style="clear:both"></div>

<div class="left">
<label>Telefono*</label>
<input ...>
</div><!-- fine left -->
<div class="right">
<label>Email*</label>
<input ...>
</div><!-- fine right -->
<div style="clear:both"></div>
</div>

<div class="campi">
<div class="quotetitle">3. Informazioni Operative</div>

<div class="left">
<label>Provincia di Competenza</label>
<input ...>
</div><!-- fine left -->
<div class="right">
<label>Partita Iva*</label>
<input ...>
</div> <!-- fine right -->
<div style="clear:both"></div>
</div><!-- fine quotetitle -->
</div><!-- fine campi -->

css:

.quotetitle{
    color: #313131;
    font-size: 17px;
    line-height: 20px;
    padding-bottom:5px;
    margin-bottom:20px;
    border-bottom:1px solid #313131;
}

#preventivo label {
    display:block
}
#preventivo input {
    background-color: #6893C8;
    border:1px solid #000;
    border-radius: 12px;
    color: #FFFFFF;
    padding: 5px 10px;
    font-size :14px;
}

.campi {
    background-color: #f7f8ff9;
    border: 1px solid #88acd3;
    border-radius: 15px;
    padding: 16px;
    margin-bottom:20px;
}

.left {
    width: 48%;
    float:left
}
.right {
    width: 48%;
    float:right
}

[provoadimparare]

Grazie mille, risolto, avevo trovato utile anche questo articolo http://www.creaecommerce.it/creare-f...u-due-colonne/