voilou mes div fonctionne tres bien comme vous pouvez le voire :
http://img363.imageshack.us/img363 [...] re38eb.jpg
voici les 2 premières lignes
<div class='esti'>
<label>Surface (m2)</label>
<input type="text" name="surface" size="5" maxlength="3" value="">
</div>
<hr/>
<div class='esti'>
<label>Nombre de pieces</label>
<select name='pieces' size='1'>
<option value=" " selected></option>
<option value="1" >1 pièce</option>
<option value="2">2 pièces</option>
<option value="3" >3 pièces</option>
<option value="4" >4 pièces</option>
<option value="5" >5 pièces</option>
<option value="6" >6 pièces</option>
<option value="7" >7 pièces et +</option>
<option value="8" >Maison Particulière</option>
</select>
</div>
<div class='esti'>
<label>Nombre de chambres</label>
<select name="chambres">
<option value=" " selected> </option>
<option value="1" >1 chambre</option>
<option value="2" >2 chambres</option>
<option value="3" >3 chambres</option>
<option value="4" >4 chambres</option>
<option value="5" >5 chambres</option>
</select>
</div>
</div>
<div class='esti'>
<label>Exposition </label>
<select name='expo' size='1'>
<option value='' selected></option>
<option value='nord'>Nord</option>
<option value='sud'>Sud</option>
<option value='est'>Est</option>
<option value='ouest'>Ouest</option>
</select>
</div>
<div class='esti'>
<label>Vue</label>
<select name='vue' size='1'>
<option value='' selected></option>
<option value='exceptionnelle'>Exceptionnelle</option>
<option value='degage'>Vue degage</option>
<option value='jardin'>Sur jardin ou parc</option>
</select>
</div> |
maintenant je vais regrouper 2 div (soit 2 select et leurs labels) dans un div (class='regroup_esti2') pour les regrouper dans un bloc.
<div class='regroup_esti2'>
<div class='esti'>
<label>Surface (m2)</label>
<input type="text" name="surface" size="5" maxlength="3" value="">
</div>
<hr/>
<div class='esti'>
<label>Nombre de pieces</label>
<select name='pieces' size='1'>
<option value=" " selected></option>
<option value="1" >1 pièce</option>
<option value="2">2 pièces</option>
<option value="3" >3 pièces</option>
<option value="4" >4 pièces</option>
<option value="5" >5 pièces</option>
<option value="6" >6 pièces</option>
<option value="7" >7 pièces et +</option>
<option value="8" >Maison Particulière</option>
</select>
</div>
<div class='esti'>
<label>Nombre de chambres</label>
<select name="chambres">
<option value=" " selected> </option>
<option value="1" >1 chambre</option>
<option value="2" >2 chambres</option>
<option value="3" >3 chambres</option>
<option value="4" >4 chambres</option>
<option value="5" >5 chambres</option>
</select>
</div>
</div>
<div class='regroup_esti2'>
<div class='esti'>
<label>Exposition </label>
<select name='expo' size='1'>
<option value='' selected></option>
<option value='nord'>Nord</option>
<option value='sud'>Sud</option>
<option value='est'>Est</option>
<option value='ouest'>Ouest</option>
</select>
</div>
<div class='esti'>
<label>Vue</label>
<select name='vue' size='1'>
<option value='' selected></option>
<option value='exceptionnelle'>Exceptionnelle</option>
<option value='degage'>Vue degage</option>
<option value='jardin'>Sur jardin ou parc</option>
</select>
</div>
</div> |
mais ce n'est pas bon du tout :
Pourquoi les 2 div class='regroup_esti2' qui regroupent mes div n'encadrent pas :
- surface + nombre de pièces et + nombre de chambres
et l'autre
- exposition + vu
mon css
.esti
{
width: 350px;
margin : 0.6em;
float: left;
border : 2px #8F0293 solid;
}
.esti select, .esti input
{
float : right;
}
.esti label { float : left; }
.regroup_esti2
{
border : 2px #8F0293 solid;
margin : 0em;
} |
