CSS Two Divs Side by Side
En este artículo aprenderás a colocar dos elementos HTML, por ejemplo dos divs, uno a lado del otro utilizando CSS. Esto puede ser particularmente útil cuando deseas construir una página web responsive. Aprenderás dos formas diferentes de lograr esto usando CSS: la primera es utilizando floats y la segunda utilizando flexbox.
📋 Aquí podrás encontrar✍
Floats
Los floats son una propiedad CSS que te permite posicionar elementos a la izquierda o a la derecha de su contenedor padre. Para que dos elementos html estén uno al lado del otro utilizando esta propiedad, debes seguir los siguientes pasos:
- Primero, debes asegurarte de que la suma del ancho de los dos elementos padre no sea mayor que el ancho de la ventana del navegador. De otra manera, uno o ambos elementos se moverán hacia abajo.
- A continuación, debes flotar los elementos a la izquierda utilizando la propiedad CSS 'float: left'
- Finalmente, para que los elementos no se superpongan, se usa la propiedad CSS 'clear: both' en el div siguiente para que se muestre debajo de los elementos flotantes.
Veamos un ejemplo de código:
<div class="wrapper">
<div class="left">Div izquierdo</div>
<div class="right">Div derecho</div>
</div>
.wrapper {
width: 100%;
}
.left {
width: 50%;
float: left;
}
.right {
width: 50%;
float: left;
}
.clear {
clear: both;
}
Flexbox
Flexbox es una forma más moderna de hacer que los elementos se muestren uno al lado del otro. La propiedad 'display: flex' se utiliza en el elemento contenedor y la propiedad 'flex: 1' se utiliza en cada uno de los elementos para hacerlos igualmente anchos.
Los pasos para lograr esto con flexbox son los siguientes:
- Primero, debes envolver los elementos en un contenedor
- A continuación, al contenedor le aplicas display: flex.
- Por último, a los elementos dentro del contenedor le aplicas flex: 1
Veamos un ejemplo de código:
<div class="wrapper">
<div class="left">Div izquierdo</div>
<div class="right">Div derecho</div>
</div>
.wrapper {
display: flex;
}
.left, .right {
flex: 1;
}
Ejemplos de Códigos
A continuación, te presentamos algunos ejemplos de código que puedes utilizar para hacer que dos elementos HTML estén uno al lado del otro utilizando las dos formas que hemos explicado:
¡No olvides añadir los estilos dentro de la etiqueta head <head>!
Floats
<div style="width:100%;">
<div style="width:50%;float:left">Div izquierdo</div>
<div style="width:50%;float:left">Div derecho</div>
<div style="clear:both;"></div>
</div>
Flexbox
<div class="wrapper" style="display:flex">
<div class="left" style="flex:1">Div izquierdo</div>
<div class="right" style="flex:1">Div derecho</div>
</div>
Conclusión
Ahora ya sabes cómo hacer que dos elementos HTML se muestren a lado del otro utilizando CSS.
Recuerda siempre tener en cuenta que la suma de los anchos de ambos no sobrepase el ancho de la ventana del navegador y que las propiedades CSS sean correctas.
Preguntas frecuentes
¿Es necesario utilizar floats o flexbox para colocar dos elementos a lado del otro?
No es necesario, también puedes utilizar propiedades como 'inline-block' o 'grid', pero estas dos que explicamos aquí son las opciones más comunes y fáciles de entender.
¿Cómo puedo hacer que los elementos tengan diferentes anchos?
Para lograr que los elementos tengan diferentes anchos, debes asegurarte de que la suma de sus anchos no excede el ancho del contenedor principal.
¿Qué hago si uno de los elementos tiene más contenido que el otro?
Puedes agregar una propiedad 'min-height' al elemento para asegurarte de que tengan la misma altura incluso si uno de ellos tiene más contenido que el otro.
¿Puedo añadir un tercer elemento a la misma línea?
Sí, puedes añadir tantos elementos como quieras utilizando estas técnicas, simplemente debes asegurarte de que sus anchos sumados no superen el ancho del contenedor del padre.
[nekopost slugs="css-no-envuelva-texto,gyphen-em-dash-and-en-dash-en-html,clases-anidadas-de-css,como-y-por-que-usar-la-celda-de-mesa-de-pantalla-en-css,centro-de-posicion-absoluta-css,hay-un-selector-css-para-elementos-que-contienen-cierto-texto,imagen-de-fondo-central,hacer-texto-en-negrita-css,tamano-del-boton-css"]
Subir
Deja una respuesta