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.