ansaurus

Question

Answer 1

+2 A:

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 2010-01-25 04:01:51

Not to be a noob, but what does the hash symbol do in CSS? Also is the indentation just to make it human-readable?

puddingfox 2010-01-25 04:21:19

@puddingfox - `#myId` is the `id` of the element,; and yes, indentation is just for presentation

K Prime 2010-01-25 04:23:51

Oh I really blanked on that one -- I use that all the time in my own CSS... should really get some more sleep

puddingfox 2010-01-25 04:25:48

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 2010-01-25 04:27:13

Answer 2

+3 A:

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:

No nested <div> needed.

Mike D. 2010-01-25 04:03:00

Answer 3

+1 A:

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 2010-01-25 04:06:54

@Marcel - IE6 with a strict doctype uses the proper box-model

K Prime 2010-01-25 04:22:36

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.

puddingfox 2010-01-25 04:23:26

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 2010-01-25 04:47:05

Answer 4

+1 A:

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 2010-01-25 04:11:33

ansaurus

tags:

views:

answers:

Alternative to <table> layout in HTML

related questions