Puddingfox Puddingfox - 3 months ago 12
HTML Question

Alternative to <table> layout in HTML

So right now I have a webpage setup 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 row 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>




Also the full webpage (all static html right now) is available here: http://128.82.6.2:8080/chat

The problem essentially is I want to nest
<div>
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.

Thanks,
pudding

Answer

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.