Si queremos crear columnas equilibradas en CSS, utilizando divs y obviamente, CSS, solo tendremos que crear un nuevo archivo HTML, e incluir este código:

<style type="text/css">
#caja_izq {width: 850px;
margin: 20px auto;
color:#fff;
background-color: #4c9ab1;
overflow: auto;
}
#caja_der {width: 500px;
float: right;
background-color: #82b04d;
border-left: solid 30px #fff;
}
.columna_izquierda {width: 280px;
float: left;
padding: 20px;
position: relative;
margin-left: -350px;
}
.columna_derecha {width: 450px;
float: left;
padding: 20px;
}
</style>

Después, deberemos crear los divs, para ello, pegamos este código:

<div id="caja_izq">
<div id="caja_der">
<div class="columna_izquierda">TU TEXTO AQUÍ</div>
<div class="columna_derecha">
TU TEXTO AQUÍ</div>
</div>

Y listo, ya tendremos creado nuestras columnas equilibradas, se puede ver un ejemplo de su funcionamiento.

Vía | Araudi



Sigue la onda…

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!