: How do you build a webpage with a main text body and 2 columns underneath? 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

@Karen819

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!

Vote Up Vote Down