6

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.

3

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:

example HTML

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!

  • 1
    That actually looks great, and is exactly what I was trying to do. I think I was over-thinking it and making it more complicated then it had to be. I've tried adding a spacer <div> but it just gets ignored by the browser. Here's the fiddle: jsfiddle.net/4vkca – user5105 Nov 2 '12 at 5:51
  • The link went to my original code. In your fiddle, just hit Save and it will produce a new link with your changes. – user7179 Nov 2 '12 at 5:54
  • Ah, sorry - jsfiddle.net/9k3bV – user5105 Nov 2 '12 at 5:57
  • 1
    Ok, try this code: jsfiddle.net/9k3bV/4 (revised) – user7179 Nov 2 '12 at 6:02
  • 1
    No problem. Glad it helped. I also made a revision using fixed padding which also leave more usable space. Just play around with it to find the best values for you: jsfiddle.net/9k3bV/5 – user7179 Nov 2 '12 at 6:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy