Como alinear capas?

[-thor-]

Como puedo lograr que la parte que dice legend quede en la misma posicion que esta la parte select(en donde dice:seleccionar opciones) y no que legend este mas abajo.

asi se ve la pagina

gracias

este es mi html
la capa fondo:contiene los div internos.
margenes_select:contiene la parte de select
margenes_input:contiene las cajas de texto.

Código PHP:

  <form action='#' method='post' id='formu'> 
<div class='fondo'><!-- comienzo clase fondo --> 
<div id='margenes_select'><!-- comienzo div margenes_select --> 
<fieldset> 
<legend>Seleccionar opciones</legend> 
<select name='opciones'> 
<option selected='selected' label='none' value='none'> 
none 
</option> 
<optgroup label='parte 1'> 
<option label ='opcion1' value='opcion1'>opcion1</option> 
<option label ='opcion2' value='opcion2'>opcion2</option> 
<option label ='opcion3' value='opcion3'>opcion3</option> 
</optgroup> 
</select> 
</fieldset> 
</div><!-- fin div margenes_select --> 
 
 
<div id='margenes_input'><!-- comienzo div margenes_input --> 
<fieldset> 
<legend>Legend</legend> 
<div id='cajastexto'><!-- comienzo div cajastexto --> 
<p> 
<label for='codigo'>texto</label><input type='text' name='codigo' id='codigo' style='margin-left:6px;'/> 
</p> 
 
<p> 
<label for='poblacion'>texto</label><input type='text' name='poblacion' id='poblacion' style='margin-left:17px;'/> 
</p> 
</div><!-- fin div cajastexto --> 
 
<div id='cajastextarea'><!-- comienzo div cajastextarea --> 
<p> 
<label for='comentario'>textarea</label><textarea name='comentario' id='comentario' rows='4' cols='15' style='margin-left:5px;'> 
</textarea> 
</p> 
<input type='submit' value='Enviar' id='enviar' title='boton de envio'/> 
</div><!-- fin div cajastextarea --> 
</fieldset> 
</div><!-- fin div margenes_input --> 
 
 
</div><!-- fin clase fondo --> 
</form>  
   

este es mi css

Código PHP:

  .fondo 
{ 
margin-left:30px; 
width:730px; 
height:400px; 
} 
 
#margenes_input 
{ 
font-size:10pt; 
margin-top:10px; 
margin-left:20px; 
margin-right:280px; 
} 
 
#margenes_select 
{ 
font-size:10pt; 
margin-top:10px; 
margin-left:480px; 
margin-right:20px; 
} 
 
#cajastexto 
{ 
float:left; 
width:50%; 
} 
 
#cajastextarea 
{ 
float:right; 
width:50%; 
}  
   

[axz]

En tus estilos del div #margenes_input ... cambia tu propiedad margin-top ... por margin-top:-55px; ... te queda así:

Código HTML:

#margenes_input
{
  font-size: 10pt;
  margin-top: -55px;
  margin-left: 20px;
  margin-right: 280px;
}

Suerte y saludos

[:.SMITEXX.:]

yo lo haría más fácil: metería todo dentro de un contenedor. Lo que pasa es que tienes todos los elementos sueltos.

Ojalá te sirva.

Chau

[axz]

Es cierto lo que dice :.SMITEXX.: ... o mejor aún ... en tu código coloca primero tu div cajastexto y luego tu div margenes_select ... la solución que te posteé anteriormente es por si lo quieres hacer todo a base de CSS ...

Bueno ahí tienes varias opciones, toma la que mejor se acomode a lo que quieres lograr ...

suerte y saludos

[Kailu]

Tampoco olvides el position:absolute; a veces es útil, ten cuidado cómo lo usas.