18

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.

Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
jamesbtate
  • 1,359
  • 3
  • 19
  • 25

5 Answers5

21

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.

Mike D.
  • 1,457
  • 7
  • 7
15

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>
micstr
  • 5,080
  • 8
  • 48
  • 76
dhiman
  • 385
  • 3
  • 9
4

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.

Eli
  • 1,269
  • 8
  • 17
  • Not to be a noob, but what does the hash symbol do in CSS? Also is the indentation just to make it human-readable? – jamesbtate Jan 25 '10 at 04:21
  • @puddingfox - `#myId` is the `id` of the element,; and yes, indentation is just for presentation – K Prime Jan 25 '10 at 04:23
  • Oh I really blanked on that one -- I use that all the time in my own CSS... should really get some more sleep – jamesbtate Jan 25 '10 at 04:25
  • 1
    Since CSS has no features like nesting, indenting is the best I can do to give some sense of organization to it. .foo refers to all elements with class="foo". #foo refers to all elements with id="foo". – Eli Jan 25 '10 at 04:27
1

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

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
  • @Marcel - IE6 with a strict doctype uses the proper box-model – K Prime Jan 25 '10 at 04:22
  • No IE6 support required -- just myself and about 15 other staff members will be using this page. We all use Firefox, Chrome, and Opera. The end-user page probably ought to have IE6 support but that page will be a lot simpler. – jamesbtate Jan 25 '10 at 04:23
  • Nice, then it gets a lot easier and you can just style the middle divs using top **and** bottom properties. @K Prime: I know, but I meant that you had to revert to quirks mode just to get the other box model, because you can't use both top and bottom properties in IE6 on the same element. – Marcel Korpel Jan 25 '10 at 04:47
  • 2020 says 'hi' - then runs away at 'support IE6 with this' – Toni Leigh Jul 29 '20 at 14:22
1

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

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80