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.
So, when creating a table, all you need to do is, instead of the HTML 'table' tag, merely use the 'div' tag and add the corresponding CSS to display a table. Here's an example to walk you through the process of creating a table.
To show a data table, point to Data Table and select the arrow next to it, and then select a display option. To hide the data table, uncheck the Data Table option.
The table element is still the correct way to provide tabular data in a semantically correct way in HTML. So if you use it semantically correct it is fine and not outdated per se.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With