Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer 1

up vote 4 down vote accepted

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!

share|improve this answer
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 –  Zac Brown 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. –  Ken Fyrstenberg Nov 2 '12 at 5:54
    
Ah, sorry - jsfiddle.net/9k3bV –  Zac Brown Nov 2 '12 at 5:57
1  
Ok, try this code: jsfiddle.net/9k3bV/4 (revised) –  Ken Fyrstenberg 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 –  Ken Fyrstenberg Nov 2 '12 at 6:10
show 2 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.