替代HTML中的布局

所以现在我有一个网页设置是完全相同的浏览器窗口的大小,有几个溢出：滚动的在它.基本上,页面排列成两列和三行表.我不想使用表格的样式/格式化,所以我的问题是如何进行这种迁移.

我的网页(简而言之)：

<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>

问题本质上是我想嵌套< div>而不放置第二个嵌套< div>在换行：

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

我想要上面在同一行显示两个可滚动区域,我不能使用< textarea>因为文本需要是多种颜色(请参阅链接提供).对于那些感兴趣的人来说,该页面最终将成为大学CS部门的完全在线浏览器即时消息技术支持系统的员工.

谢谢,
布丁

解决方法

那么你这样做的基本方法就是将你的页面分解成六个÷

<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>

然后你写一些CSS：

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

你应该得到如下的东西：

1   2

3   4

5   6

否嵌套< div>需要.