[SOLUCIONADO] Se sobreponen dos capas

[mblascog]

Buenas,
Tengo implementado un buscador, en la imagen se puede ver parte de él.



Me gustaría separar un poquito la referencia de Venta o Alquiler. Parece una cosa tonta, pero no lo consigo.
Con las herramientas del desarrollador, veo que el alto de la referencia es correcto, el alto del tipo también, en cambio, el alto de Venta o Alquier, no sé porqué, pero en lugar de lo que se ve, se sobrepone a la referencia. Uf!! no sé si me acabo de explicar.

Se puede ver un ejemplo en
este enlace

El código html es:

Código HTML:

<div id="formRecerca">
                <form name="frmRecerca" method="post" action="<?php echo URL.$linkimmoblesTrobats[$idioma]?>" id="frmRecerca">
                    <input name="opcioMenu" type="hidden" id="opcioMenu" value="<?php echo $opcioMenu?>"/>
                    <div id="divReferencia">
                        <?php echo $referencia[$idioma].": ";?><input type="text" id='referencia'>
                        <img id="lupaRecerca" src="<?php echo URL.'imatges/lupa.png'?>"/>
                    </div>
                
                    <div id="divVenda">
                        <?php echo $operacio[$idioma]." <em>*</em>"?><br/>
                        <select class="ample90" name="fOperacio" id="fOperacio">
                            <?php echo ompleOperacio($comboOperacio, $seleccionar[$idioma], $selectOperacio);?>
                        </select><br/>
                        <input name="ftxtOperacio" type="hidden" id="ftxtOperacio" value="<?php echo $comboOperacio[$seleccionat][$idioma]?>"/>
                        <input name="fopcioId" type="hidden" id="fopcioId" value="<?php echo $opcioId?>"/>
                        <input name="fOpcio" type="hidden" id="fOpcio" value="<?php echo $opcio?> "/> 
                    </div>
        
                    <div id="divTipus">             
                        <?php echo $tipus[$idioma]." <em>*</em>"?><br/>
                        <select class="ample90" name="fTipus" id="fTipus">
                            <?php
        //                      if (isset ($selectOperacio) and ($selectOperacio != "")) {
                                    if ($opcioId == "0") {
                                        $Consulta = 'SELECT id_familia, nombre_familia_'.$idioma.' FROM t_familia WHERE id_familia <> 1';
                                        echo ompleTipusOB($Consulta, 'id_familia', 'nombre_familia_'.$idioma, $seleccionar[$idioma], $selectTipus);             
                                    }
                                    else 
                                        echo ompleTipus($comboTipus[$opcioId], $seleccionar[$idioma], $selectTipus, $opcioId);
        //                      }
                            ?>
                        </select><br/>
                    </div>
 

Y el código CSS el siguiente:

Código CSS:

#recerca div#formRecerca{
    font:bold 0.7em 'Helvetica';
    color:gray;
    margin-left:5%;
    float:left;
    width:93%
}
#recerca #formRecerca form{
    height:100%;
}
#recerca div#formRecerca form div{
    margin-bottom:1%
}
#recerca div#formRecerca form#frmRecerca div#divTipus em{
    font: 1em 'Helvetica';
    color:#000;
}
#recerca div#formRecerca form#frmRecerca div#divVenda em{
    font: 1em 'Helvetica';
    color:#000;
}
#h2Recerca{font:bold 1.3em/1 'Helvetica';
    color:#035A5B;
    margin-top:4%;
    margin-bottom:8%;
    margin-left:5%;
}
#h2Recerca em{
    font-size:1em; 
    color:#5CACAD;
}
#butoRecerca{
    background:#367A7B;
    height:100%;
    width:87%;
    text-align:center;
    margin-top:8%;
    padding-top:2%;
    font:bold 1.3em 'Helvetica';
    color:#FFF;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}
#butoRecerca div input{
    cursor:pointer;
    border:0;
    height:100%;
    background:#367A7B;
    font:bold 1.2em 'Helvetica';
    color: #FFF;
}
#divReferencia {
    float:left;
    width:87%;
    background:#EFEEE0;
    padding:2%
}
#divReferencia input{
    margin:2%;
    width:90px;
}
#divReferencia a{
    float:right;
    margin-right:10%
}
#divReferencia img{
    margin-left:5%;
    width:40px;
    height:40px;
    vertical-align:middle;
}
#divReferencia img:hover{
    background-color:#FFF;
    cursor:pointer;
}
 

Muchas gracias

[martinmiranda90]

Hola. A ver si he entendido bien. Intentas separar el recuadro de a referencia de donde comienzan las opciones que en este caso es Venta o Alquiler,cierto?. Si es asi,prueba esto: Esta opción que tienes establecido hace que todos los divs del form tengan un margin-bottom establecido de 1%:

Código:

#recerca div#formRecerca form div{ 
    margin-bottom:1%
}

Con lo cual si quieres hacer que el div de la referencia tenga mayor margen que el resto simplemente o bien quitas esa linea o pones esto:

Código:

#divReferencia{
..
margin-bottom: [el margen que quieras poner] !important;
}

de esa manera debería dejarte un mayor espacio.
Un saludo y esper haberte ayudado.

[mblascog]

Gracias martinmiranda90. Tema resuelto