Ubicar contenedores div en página en html
Ojala me puedan ayudar amigo:
Resulta que tengo una página en html, en la cual quiero ubicar 3 contenedores (divs) que sean ubicados de la siguiente manera:
Contenedor1: Con un tamaño de 486 px de ancho y 560 pixeles de alto, este contenedor se ubique exactamente en medio de la página.
Contenedor2: Con un tamaño de 238px de ancho y 114px de alto, este contenedor se ubique pegado a la esquina inferior izquierda de la pantalla
Contenedor3: Con un tamaño de 238px de ancho y 114px de alto, este contenedor se ubique pegado a la esquina inferior derecha de la pantalla
Lo máximo que he podido hacer es centrar el contenedor1 en el centro de la página pero no se que hacer para agregar los divs y ubicarlos en las posiciones que he descrito
Para que no quede dudas adjunto una imagen de como debe quedar los divs.
1 Respuesta
La solución depende, a mi ver, a jugar un poco con css.. espero que esto te ayude o te explique mejor...
<html>
<head>
<style>
*{
font-family: arial;
font-size: 10px;
}
body{
overflow: hidden; /*oculta la barra de desplazamiento*/
}
#principal{
position: absolute;
width: 486px;
height: 560px;
left: 50%;
top: 50%;
margin-left: -243px;
margin-top: -280px;
border: 1px solid #ccc;
background: #006699;
}
#izquierdo{
position: absolute;
bottom: 0px;
left: 0px;
display:block;
width: 238px;
height: 114px;
background: #e6efff;
}
#derecho{
position: absolute;
bottom: 0px;
right: 0px;
display:block;
width: 238px;
height: 114px;
background: #dfdfdf;
}
</style>
</head>
<body>
<div id="principal">Contenedor 1</div>
<div id="izquierdo">Contenedor 2</div>
<div id="derecho">Contenedor 3</div>
</body>
</html>
Excelente amigo, eres lo máximo, me sirvió muy bien.
Disculpa mi exceso de confianza pero tengo una nuevo situación.
Resulta que ahora deseo colocar un cuarto contenedor con ancho 600 y alto 400 que se ubique a 10 px por encima del contenedor1, con la condición de que el contenedor 1 siempre se ubique al centro de la página.
Te adjunto una imagen para que veas como quedaría
Gracias nuevamente
Los valores que das para el nuevo div ocacionarian que se encimara siempre sobre el div principal, sin embargo lo puedes hacer con jquery aquí como lo hago yo, espero que te ayude... pero si, checa bien los valores que darás a la altura y anchura de los divs.
<html>
<head>
<style>
*{
font-family: arial;
font-size: 10px;
}
body{
overflow: hidden; /*oculta la barra de desplazamiento*/
}
#principal{
position: absolute;
width: 486px;
height: 560px;
left: 50%;
top: 50%;
margin-left: -243px;
margin-top: -280px;
border: 1px solid #ccc;
background: #006699;
}
#izquierdo{
position: absolute;
bottom: 0px;
left: 0px;
display:block;
width: 238px;
height: 114px;
background: #e6efff;
}
#derecho{
position: absolute;
bottom: 0px;
right: 0px;
display:block;
width: 238px;
height: 114px;
background: #dfdfdf;
}
#flotante{
position: absolute;
top: 900px;
left: 50%;
width: 400px;
height: 20px;
margin-left: -200px;
background: red;
}
</style>
<script src="../jquery.js"></script>
<script>
$(document).ready(function(){
naltura = ($('#flotante').outerHeight())-10; //aqui se colocamos los 10 pixeles al margen
//indicamos la nueva posicion para el contenedor 4
$("#flotante").css('top',naltura +'px');
});
</script>
</head>
<body>
<div id="principal">Contenedor 1</div>
<div id="izquierdo">Contenedor 2</div>
<div id="derecho">Contenedor 3</div>
<div id="flotante">Contenedor 4</div>
</body>
</html>
