Posicionar div horizontalmente.
Cuando agregamos etiquetas en Html estas siempre se ubican verticalmente en la página. Si queremos posicionar dos div paralelos tendremos que utilizar CSS, para ello les traigo un breve ejemplo que les será de gran ayuda.Código html.
<!DOCTYPE html>
<html lang="es">
<head><title>poner dos div juntos</title>
<!--Agregamos la hoja de estilos-->
</head>
<body>
<div id="agrupar">
<div id="izquierda">
<h1>div izquierdo</h1>
<p>
Esto es un texto de ejemplo para mostrar como<br>
hacer para poner dos div juntos y alineando horizontalmente.
</p>
</div>
<div id="derecha">
<h1>div Derecha</h1>
<p>
Esto es un texto de ejemplo para mostrar como<br>
hacer para poner dos div juntos y alineando horizontalmente.
</p>
</div>
</div>
</body>
</html>
<html lang="es">
<head><title>poner dos div juntos</title>
<!--Agregamos la hoja de estilos-->
</head>
<body>
<div id="agrupar">
<div id="izquierda">
<h1>div izquierdo</h1>
<p>
Esto es un texto de ejemplo para mostrar como<br>
hacer para poner dos div juntos y alineando horizontalmente.
</p>
</div>
<div id="derecha">
<h1>div Derecha</h1>
<p>
Esto es un texto de ejemplo para mostrar como<br>
hacer para poner dos div juntos y alineando horizontalmente.
</p>
</div>
</div>
</body>
</html>
Código de la hoja de Estilos.
#agrupar{
background:black;
padding:10px;
overflow:hidden;
}
#izquierda{
float:left;
padding:10px;
color:white;
width:590px;
margin:20px;
background:#8A0808;
}
#derecha{
float:left;
padding:10px;
color:white;
width:590px;
margin:20px;
background:#8A0808;
}
background:black;
padding:10px;
overflow:hidden;
}
#izquierda{
float:left;
padding:10px;
color:white;
width:590px;
margin:20px;
background:#8A0808;
}
#derecha{
float:left;
padding:10px;
color:white;
width:590px;
margin:20px;
background:#8A0808;
}
Resultado esperado.
Click a la imagen para agrandar.
No hay comentarios.:
Publicar un comentario