¿Cómo construyes una página web con un cuerpo de texto principal y 2 columnas debajo?

Tengo un cuerpo de texto que estoy tratando de diseñar de una manera visualmente agradable, pero no puedo resolverlo. El objetivo es tener este diseño (ver pseudocódigo):

<container>
    <main />
    <column1 /><column2 />
</container

Básicamente, habrá un gran cuerpo de texto y luego, debajo de él, 2 cuerpos de texto más pequeños que son columnas. Las columnas estarían una al lado de la otra, debajo del cuerpo principal del texto y su ancho combinado + su relleno tendría el mismo ancho que el cuerpo principal + su relleno.

Actualmente estoy probando un método javascript + CSS que divide automáticamente el texto en columnas, pero no va a ninguna parte y no puedo encontrar una forma visualmente agradable de hacerlo.

Respuestas (1)

No necesitas Javascript para esto, solo html y css.

Puedes hacer algo como esto: ( ver código en vivo aquí )

Una estructura html básica:

<div id="container">
    <div id="main">
        Main
    </div>
    <div class="column">
        Column1
    </div>
    <div class="column">
        Column2
    </div>
</div>

CSS para los elementos (solo por ejemplo):

#container {
    display:block;
    width:100%;
    float:left;
    clear:both;
}
#main {
    display:block;
    clear:both;
    border:#000 solid 1px;
}
.column {
    display:block;
    width:49%;
    float:left;
    border:#000 solid 1px;
}

Esto producirá este resultado:

HTML de ejemplo

El #Containeres la "página". en este ejemplo llenará el 100% de la ventana del navegador. puede configurarlo en un tamaño fijo si lo desea (por ejemplo, Width:960px;y margin:0 auto 0 auto;para centrarlo, en el archivo CSS).

El enlace en la parte superior va a una vista en vivo del código. Siéntase libre de jugar con el código allí. Haga clic en Ejecutar para actualizar sus cambios.

Agregué border:en el CSS para que los cuadros fueran visibles por el bien del ejemplo (agregan ancho, por lo que el ancho en el ejemplo es el 49% de las columnas).

El relleno se suma al ancho incluso si establece 50% para la columna (= 50% + relleno). El truco es agregar otro div dentro de la columna div con solo el relleno que necesita (sin ancho) y se ajustará al espacio disponible.

¡Espero que esto ayude!

Eso realmente se ve muy bien, y es exactamente lo que estaba tratando de hacer. Creo que lo estaba pensando demasiado y lo estaba haciendo más complicado de lo que tenía que ser. Intenté agregar un espaciador <div> pero el navegador simplemente lo ignora. Aquí está el violín: jsfiddle.net/4vkca
El enlace fue a mi código original. En su violín, simplemente presione Guardar y producirá un nuevo enlace con sus cambios.
Ah, lo siento - jsfiddle.net/9k3bV
Ok, prueba este código: jsfiddle.net/9k3bV/4 (revisado)
¡Perfecto! ¡Gracias! Eso es mucho más simple que la forma en que estaba tratando de hacerlo.
No hay problema. Me alegro de que haya ayudado. También hice una revisión usando relleno fijo que también deja más espacio utilizable. Simplemente juegue con él para encontrar los mejores valores para usted: jsfiddle.net/9k3bV/5
Tenga en cuenta que en los navegadores modernos, incluido IE8, puede establecer la propiedad CSS box-sizingen el valor "border-box"para incluir el borde y el relleno en el 50 % del ancho.
¿Cómo construyes una página web con un cuerpo de texto principal y 2 columnas debajo?
RespuestasAquíPolítica de privacidad1y, 0v