Uso de divs con css

wapolpz · #1 (**permalink**) 15/05/2012, 01:58

Hola soy nuevo en el foro soy de México y estoy aprendiendo CSS pero me tope con un problema grande para mi tal vez mu facil para ustedes, alguien me podira explicar por que sucede este problema:

Estoy haciendo un formulario, agregando cada campo en un DIV, resulta que uno de los divs intermedio cuando quiero agregarle margin top, lo agrega pero como si estuviera al incio del DIV contenedor.

Este es la imagen del DIV:

http://s778.photobucket.com/albums/yy61/wapolpz/?action=view&current=form.png

Si le agrego suficiente margen, se situa donde quiero:

http://s778.photobucket.com/albums/yy61/wapolpz/?action=view&current=form2.png

Pero lo que quieron es situarlo ahi, con clear:bloth y que esa sea su posicion de inicio, pero cuando le aplico el clear both si se situa ahí pero no me funciona el margen y lo toma como si estuviera al inicio.

esto es lo que quiero:

http://s778.photobucket.com/albums/yy61/wapolpz/?action=view&current=both.png

Bueno saludos y espero poner mi granito de arena en este foro.

************************************************** **************

Este es el Código:

<html>
<head>
<title>Registro de Candidatos</title>
<style type="text/css">
#contenedor{
width:800px;
background-color:LightBlue;
border:2px solid navy;
margin:auto;
height:500px;

}

.caja{
width:250px;
height:50px;
border:1px solid orange;
float:left;
margin-left:10px;
margin-top:10px;

}

#lenguajes{
width:300px;
heigt:100px;
margin-top:50px;
margin-left:10px;
border:3px solid green;
clear:both;
}

#des{
margin-top:10px;
width:430px;
height:300px;
border:1px solid red;

}

label{
font-style:italic;
font-weight:bold;
}
</style>
</head>

<body>
<div id="contenedor">
<div class="caja">
<label class="titulos">Nombre:</label><br />
<input type="text" name="nombre" />
</div>
<div class="caja">
<label class="titulos">Oficio:</label><br />
<input type="text" name="oficio">
</div>
<div class="caja">
<label>Edad:</label><br />
<input type="text" name="edad" />
</div>
<div class="caja">
<label>Sexo:</label><br />
H<input type="radio" name="sexo" value="h" />
M<input type="radio" name="sexo" value="m" />

</div>
<div class="caja">
<label class="titulos">Telefono:</label><br>
<input type="text" name="telefono" />
</div>
<div class="caja">
<label>Pais:</label><br>
<select name="pais">
<option value="MEX">México</option>
<option value="ARG">Argentina</option>
<option value="USA">Estados Unidos</option>
</select>

</div>
<div id="lenguajes">
<label>Selecciona los lenguajes que dominias:</label><br />
<table>
<tr>
<td>C++<input type="checkbox" name="cplus" /></td>
<td>C#<input type="checkbox" name="cgato" /></td>
<td>JAVA<input type="checkbox" name="java"></td>
</tr>
</table>
</div>
<div id="des">
<label>Describete:</label><br />
<textarea name="descripcion" rows="10" cols="50">
</textarea>

</div>
</div>
</body>
</html>

garciasanchezdani · #2 (**permalink**) 16/05/2012, 02:17

Hola amigo

Prueba añadiendo padding-bottom a .caja

Código CSS:

Ver original.caja{
width:250px;
height:50px;
border:1px solid orange;
float:left;
margin-left:10px;
margin-top:10px;
padding-bottom:2em; //Esta línea la he añadido yo
}

Saludos, Daniel