How do you build a webpage with a main text body and 2 columns underneath?

Question

I have a body of text that I am trying to layout in a visually pleasing way but I can not figure it out. The goal is to have this layout (see psuedocode):

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

Basically, there will be a large body of text and then below it 2 smaller bodies of text that are columns. The columns would be side by side, below the main body of text and their combined width + their padding would be the same width ad the main body + its padding.

Currently I'm trying a javascript + CSS method that automatically breaks the text into columns but it's going nowhere and I can't figure out a visually pleasing way to do this.

Answer 1

You don't need Javascript for this, only html and css.

You can do something like this: (see code live here)

A basic html structure:

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

CSS for the elements (just for example):

#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;
}

This will produce this result:

The #Container is the "page". in this example it will fill 100% of the browser window. you can set it to a fixed size if you like (f.ex. Width:960px; and margin:0 auto 0 auto; to center it, in the CSS file).

The link in the top goes to a live view of the code. Feel free to play around with the code there. Click Run to update your changes.

I added border: in the CSS to make the boxes visible for the sake of the example (they add width so the width in the example is 49% of the columns).

Padding adds to the width even if you set 50% for the column (=50% + padding). The trick is to add another div inside the column div with only the padding you need (no width) and it will adjust itself to the space available.

Hope this helps!