Situar un div al costado de otro

En ocasiones cuando estamos maquetando o diseñando el estilo de una página Web queremos situar un contenido al lado de otro y puede que no sepamos como hacerlo.

Se podría hacer con tablas pero una forma más limpia de hacerlo es con div’s y utilizar las técnicas CSS para posicionarlos en la pantalla.

Vamos a ir al grano y lo que haremos es mostrar todo el código fuente para explicarlo.

El código CSS necesario podría ser el siguiente:

.content {
    width: 100%;
}

.title {
    font-size: 20px;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 10px;   
    padding-bottom: 10px;
    background-color: steelblue;
    width: 97%;
}

.left {
    padding-left: 10px;
    padding-top: 10px;
    margin-left: 57px;
    float: left;
    position: relative;
    width: 45%;
    border: steelblue solid 1px;
    height: auto;
}

.right {
    padding-top: 10px;
    padding-left: 10px;
    margin-left: 10px;
    position: relative;
    float: left;
    width: 45%;
    border: steelblue solid 1px;
    height: auto;
}

Donde declararemos 4 clases: la «content» es el estilo que contendrá el div general del diseño y contendrá los 2 div’s uno al lado del otro.

La clases «left» como su nombre indica será el contenido de la izquierda y como vemos le estamos definiendo un ancho en porcentaje, un borde, su posición es relativa y flotará a la izquierda entre otros detalles.

La clase «right» será el contenido de la derecha y también le definimos algunos estilos entre ellos, su anchura, su posición relativa, separado 10px del contenido de la izquierda y flotará a la izquierda del div anterior, entre otros detalles.

Después, tenemos una clase extra que se utiliza para los títulos de los contenidos que podría ser opcional.

El código HTML que tendremos será muy simple, mucho más simple que si utilizaramos tablas.

<div class="content">
        <h2>Contenido principal</h2>
        <div class="left">
            <div class="title">Contenido de la izquierda</div>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
        </div>
        <div class="right">
            <div class="title">Contenido de la derecha</div>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
            <p>parrafo</p>
        </div>
    </div>

Ver el ejemplo en funcionamiento con 2 elementos

Ver ejemplo en funcionamiento con 3 elementos