Question

Right now I have a webpage set up to be exactly the size of the browser window with a couple overflow:scroll ‘s in it.

Basically, the page is arranged in two columns and three rows of a table. I would like to not use tables for style/formatting so my question is how would I make this migration.

My page (in a nutshell):

<table>
<tr>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff1
            </div>
            <div>
                stuff1A
            </div>
        </div>
    </td>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff2
            </div>
            <div>
                stuff2A
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
           <input type="submit"><input type="submit"><input type=    "submit">
    </td>
    <td>
           <input type="submit"><input type="submit"><input type="submit">
    </td>
</tr>
<tr>
    <td>
    <textarea>stuff3</textarea></td>
    <td><select multiple>
        </select></td>
</tr>

The problem essentially is, I want to nest <div>s without putting a second nested <div> on a newline:

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div>
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div>

I want the above to display two scrollable areas on the same line and I can’t use <textarea> because the text needs to be multiple colors (see link provided).

For those interested, the page will eventually be the staff side of a completely in-browser instant message tech support system for a university’s CS department.

Answer 1

Well, the basic way you do this is to break your page up into six <div>s:

<div class="left" id="l1">1</div>
<div class="right" id="r1">2</div>
<div class="left" id="l2">3</div>
<div class="right" id="r2">4</div>
<div class="left" id="l3">5</div>
<div class="right" id="r3">6</div>

Then you write some CSS:

div.left {
    float: left;
    clear: both;
}

And you should get something like:

1   2

3   4

5   6

No nested <div> needed.