Problema maquetación con divs y css

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 este es el CSS:

Código CSS :

#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;}

Muchas gracias por la ayuda!

Código HTML :

<div class="opcion" style="width:30px">

Creo que es porque tienes un ancho definido.

Y echa un vistazo al html de forms. Por ejemplo, el nombre del campo, en lugar de span, es mejor que vaya con la etiqueta label y for para relacionarlo con el campo.

Gracias por tu respuesta. Lo he probado y no, no se arregla. Este es el nuevo código HTML (le he puesto un ancho a un input, es para que coincida con un cambio de línea, el problema no viene de ahí creo):

Código HTML :

<div id="capaOpciones">

<div class="opcion">
<label class="ltdetail">Título:
<input id="textoTitulo" name="titulo" type="text" class="textbox" />
</label>
</div>

<div class="opcion">
<label class="ltdetail">Este mensaje...
<select name="reqRespuesta">
  <option value="si" selected="selected">Requiere respuesta</option>
  <option value="no">No requiere respuesta</option>
</select>
</label>
</div>


<div class="opcion">
<label class="ltdetail">Fecha límite respuesta (DD/MM/AAAA):
<input name="fecha" type="text" class="textbox" style="width:30px"/>
</label>
</div>
<div class="opcion">
<label class="ltdetail">Hora límite (HH:MM):
<input name="hora" type="text" class="textbox"/>
</label>
</div>
<div style="clear:both;"></div><!--requerido para que la div de opciones adapte su altura al contenido-->
</div>

Os dejo también un Fiddle. Fijaos lo que pasa al alargar la ventana. [url=http://jsfiddle.net/jXgZq/2/][/url]

Estás usando float: left para hacer lo que quieres, pero así no deberías hacerlo. A la clase .opcion quita el float y reemplázalo con display: inline-block;