Alternative to <table> layout in HTML

user_294435 0
Viewed 52124

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.

html-table html
5 Answers

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.

user_2086640

New CSS grid option:

<style>
#grid {
    display: grid;
    grid-template-columns: 20% 20% 20%;
}
</style>

<div id="grid">
    <div>first</div>
    <div>second</div>
    <div>third</div>
    <div>fourth</div>
    <div>fifth</div>
    <div>sixth</div>
    <div>seventh</div>
    <div>eighth</div>
    <div>ninth</div>
</div>
user_27733660

You should generally mark up your content semantically and then style it.

It looks like you have five main areas:

  • messages
  • user list
  • controls
  • input
  • chatrooms

Let's make some markup:

<div class="left">
    <div id="messages">
        messages
    </div>
    <div id="user-list">
        user-list
    </div>
</div>
<div id="controls">
    controls
</div>
<div class="left">
    <div id="input">
        input
    </div>
    <div id="chatrooms">
        chatrooms
    </div>
</div>

And a little bit of style:

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

And you should be able to complete it from here. The most important part of most CSS layouts is proper floating.

user_2524860

Thanks for the link, that explains a lot. Sounds familiar, I've done this before, but it can be pretty tricky.

Before explaining the lot, I need to know whether you want to support IE6 with this. If so, you'll probably have to revert to IE quirks mode, as you will need the border-box box model (which can't be selected in another way in IE, and it's not possible to use both top and bottom properties). If so, I recommend to put all other browsers in this box model, too, so you don't have to make two separate stylesheets for IE and the rest (yes, you'll still need some workarounds, of course). In short, after using this different box model you can have quasi top and bottom properties by styling using border-top and border-bottom, instead. They'll act like top and bottom, because they're now inside the given height (of, for instance, 100% of the viewport). I hope this is at least a bit understandable.

If not, than it's a bit simpler and you can style using fixed positioning and <div> getting top and bottom properties. IIRC, this should also work in IE7+.

But first, tell me whether you need support for the buggy one or not...

user_2581270

The problem with Eli's and Mike D.'s answers is that, if I understood this question correctly, puddingfox wants the three divs above eachother be spread over the total size of the viewport. In that case, you'll get problems coding IE6, because then you can't use both top and bottom properties on the same element (which is needed for the middle divs).

user_2581270
Related