Question

I need a two column table with one word in the left column (e.g. name, biography) and with details for each in the right column. I have tried:

<div id="container">
<div id="left_column">......</div>
<div id="right_column">......</div>

</div>

This looks fine if the right column only has one or two words, but for longer entries such as ‘bio’ the second div’s info snakes underneath the left_column div.

What’s the easiest way to achieve the two columns without this happening?

Answer 1

You need to float them, and set some widths.

#container {
    width:100%;
}
#left_column {
    float:left;
    width:20%;
}
#right_column {
    float:left;
    width:80%;
}

Note: If you only float them, and don’t set widths, they’ll still snake under each other when the browser window gets narrow.