[SOLUCIONADO] posicionamiento de divs

#1 (**permalink**) 21/07/2014, 10:55

Hola:

Quiero acomodar los divs de esta forma:

e intentado con posicionamientos absolute, relative pero no logro conseguirlo

este es mi código, he borrado los posicionamientos

CSS:

body{
margin:0px;
}
#contenedor{
width:100%;
background:#666;
}
#cabecera{
width:700px;
height:150px;
background:#000;
margin:0 auto;
}
#cuerpo{
width:700px;
height:450px;
background:#CCC;
margin:0 auto;
}
#contenido1{
width:650px;
height:50px;
background:#FFC;
}
#contenido2{
width:650px;
height:100px;
background:#FC3;
}
#contenido3{
width:650px;
height:200px;
background:#FFF;
}
#pie{
width:700px;
height:50px;
background:#000;
margin:0 auto;
}

HTML:
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="cuerpo">
<div id="contenido1">
</div>
<div id="contenido2">
</div>
<div id="contenido3">
</div>
</div>
<div id="pie">
</div>
</div>
</body>

y me queda así:

como debo usar los position???

alzacon · #2 (**permalink**) 21/07/2014, 11:27

Por favor (al menos las próximas veces) usa la opción de "Highlight" en vez de pegarlo directamente y dar colores. Mira por ejemplo tu html como se ve mejor usandolo.

Código HTML:

Ver original<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="cuerpo">
<div id="contenido1">
</div>
<div id="contenido2">
</div>
<div id="contenido3">
</div>
</div>
<div id="pie">
</div>
</div>
</body>

¿Position para qué? La posición por defecto es relative. Por ejemplo para centrarlos horizontalmente no entiendo porque no haces como con el div #cuerpo. Y ya de paso añades algo de margin "vertical" a los divs de dentro y ya lo tienes.

pzin · #3 (**permalink**) 21/07/2014, 12:42

Cita:

Iniciado por alzacon

La posición por defecto es relative.

static

alzacon · #4 (**permalink**) 21/07/2014, 14:00

Cita:

Iniciado por pzin

static

ya ni acordaba de que había más positions

Si usas posición absoluta o relativa puedes usar top, left, ... para colocar, aunque más facil con margin (a no ser que otra vez pzin ->

)

Nelsonfmc · #5 (**permalink**) 21/07/2014, 19:30

¿Y así?

Código CSS:

Ver originalbody{
margin:0px;
}
#contenedor{
width:100%;
background:#666;
}
#cabecera{
width:700px;
height:150px;
background:#000;
margin:0 auto;
}
#cuerpo{
padding:50px;
width:700px;
height:450px;
background:#CCC;
margin:0 auto;
}
#contenido1{
width:650px;
height:50px;
background:#FFC;
}
#contenido2{
margin-top:25px;
width:650px;
height:100px;
background:#FC3;
}
#contenido3{
margin-top:25px;
width:650px;
height:200px;
background:#FFF;
}
#pie{
width:700px;
height:50px;
background:#000;
margin:0 auto;
}

Ve cambiando los valores del padding, margin, los width y height hasta que coincida perfecto, suena tedioso pero es rápido.

Es la solución más fácil que le veo, espero que te sirva, saludos.

siddartha23 · #6 (**permalink**) 21/07/2014, 20:41

Te recomiendo que uses clases cuando te des cuenta que algunos elementos van a compartir algunas características, por ejemplo en tu código las tres cajas de contenido miden lo mismo de ancho y están centradas dentro de #cuerpo, por lo tanto lo que necesitarías es crearles una clase .contenido con margin: 0 auto y width:650px.

Y para dejarlos como en la imagen le pones un padding al #cuerpo y al segundo contenido le pones un margin-top y margin-bottom para separarlos...

#7 (**permalink**) 21/07/2014, 21:20

Cita:

Iniciado por Nelsonfmc

¿Y así?

Código CSS:

Ver originalbody{
margin:0px;
}
#contenedor{
width:100%;
background:#666;
}
#cabecera{
width:700px;
height:150px;
background:#000;
margin:0 auto;
}
#cuerpo{
padding:50px;
width:700px;
height:450px;
background:#CCC;
margin:0 auto;
}
#contenido1{
width:650px;
height:50px;
background:#FFC;
}
#contenido2{
margin-top:25px;
width:650px;
height:100px;
background:#FC3;
}
#contenido3{
margin-top:25px;
width:650px;
height:200px;
background:#FFF;
}
#pie{
width:700px;
height:50px;
background:#000;
margin:0 auto;
}

Ve cambiando los valores del padding, margin, los width y height hasta que coincida perfecto, suena tedioso pero es rápido.

Es la solución más fácil que le veo, espero que te sirva, saludos.

Gracias por la solución