[SOLUCIONADO] Problema alineación divs

[AlexWeb]

Saludos a todos!

Estoy maquetando una web, y me encuentro con problemas a la hora de alinear ciertas capas contenidas en una capa contenedora.

La idea es que las capas se vayan colocando una al lado de otra, hasta que lleguen al final del ancho de la capa contenedora. En tal caso, la capa en cuestión se colocará en una nueva línea, debajo de las anteriores.

El problema es que no sé por qué pero cuando una capa ya no cabe en la 1ª línea y se coloca en la 2ª, se coloca no al inicio de la 2ª línea en horizontal, si no debajo de la 2ª capa de la 1ª línea! Es una cosa bastante rara...alguien me sabría decir por qué pasa esto? Os dejo el código:

Código HTML:

<div id="capaOpciones">
<div class="opcion">
<span class="ltdetail">Título:</span>
<input id="textoTitulo" name="titulo" type="text" class="textbox" />
</div>
<div class="opcion">
<span class="ltdetail">Este mensaje...</span>
<select name="reqRespuesta">
  <option value="si" selected="selected">Requiere respuesta</option>
  <option value="no">No requiere respuesta</option>
</select>
</div>
<div class="opcion" style="width:30px">
<span class="ltdetail">Fecha límite respuesta (DD/MM/AAAA):</span>
<input name="fecha" type="text" class="textbox" />
</div>
<div class="opcion">
<span class="ltdetail">Hora límite (HH:MM):</span>
<input name="hora" type="text" class="textbox" />
</div>

<div style="clear:both;"></div>
</div> 

Y esto es el CSS:

Código:

#capaOpciones {
width:950px;
background:#d5d1bf;
padding:20px;
}

select {

border:none;
font:13px Tahoma, Geneva, sans-serif;

}

.opcion {

float:left;
margin:10px;

}

.textbox {font:13px Tahoma, Geneva, sans-serif;width:290px;border:none;padding:2px;color:#444}

.ltdetail {font:14px Tahoma, Geneva, sans-serif;color:#413e32;font-weight:bold;}

[pzin]

Si eliminas style="width:30px" debería de funcionar como esperas.

[AlexWeb]

Gracias por la respuesta, lo he eliminado, y no funciona.

He estado jugando un poco con el código, y he descubierto que quien da el problema es el select! Es decir, si cambio todo el trozo de código del select por un input de texto, todo se alinea como se espera.

De todas formas, sigo sin entender por qué pasa esto y cómo evitarlo...es una cosa bastante extraña...

[pzin]

Iniciado por AlexWeb

Gracias por la respuesta, lo he eliminado, y no funciona.

http://jsfiddle.net/pzin/jXgZq

Si cambias el tamaño de la ventana del resultado verás que siempre se adapta. Sólo cambié aquello que comenté y luego para ver mejor que funciona cambié el tamaño del contenedor a 100%.

[AlexWeb]

Pero fíjate en esto: http://jsfiddle.net/jXgZq/2/

Y fíjate lo que pasa al alargar la ventana. Creo que en tu ejemplo se veía bien porqué cuadraban los anchos (en este ejemplo he cambiado el ancho de un input).

[pzin]

Ahora vi. El problema es que la caja del título tiene mayor altura, entonces los elementos flotados se ajustan por ahí.

Prueba con:

Código CSS:

.opcion {
  min-height: 24px;
}
 

Así tienen todos al menos la misma altura.

[AlexWeb]

Como la seda va ahora. Un millón de gracias!!