CSS and container size.

Factual Questions
1

On my site, I have a two column layout, a navigation menu on the left and a broad content column adjacent. There are two header boxes on top.

The navigation menu is fixed in content (and thus length) for a given section. The content box varies quite a lot. How do I ensure that both boxes span the same length (the greater of both boxes).

I tried using a “container” div tag, placing the two boxes inside, and setting height of each to 100%. That didn’t work out.

Can anyone help?

And is there a lucid, comprehensive explanation of CSS layout and positioning that explains the nuances of the position and margin and padding parameters …etc?

2

Read up on the box hack. IE does not render CSS accurately while Mozilla does.

Search for Jeffrey Zeldman. Buy his book. Same for Eric Meyer. Buy his book, too.

3

I tried something very similar. It can’t be done. In Netscape, you can set display: table-cell to make them the same height, but this doesn’t work for IE.

Now, in my case, on some pages the navigation bar had taller content, and in some cases the content bar had taller content. But if you know that one or the other will always be taller, and you don’t want something special like borders on the shorter one, you can float the taller one. I saw this on alistapart, but they’ve changed their structure now, it seems.

4

I should point out that I’m only confident in this assertion because I asked on comp.infosystems.www.authoring.stylesheets last May (link). Maybe you can read that thread and get more out of it than I did, though.

5

I tried to do this, too, and there is no way to code for on-the-fly sizing using CSS. You need to use another language: IIRC Javascript can do it.

6

Looking at your site, I think this would be possible in your case if you are willing to make the “categories” and “content” divs a variable width, instead of a fixed number of pixels. Here is roughly what you do:

<div class=“content” style=“float: right; width: 80%”>
Lots of content
</div>
<div class=“categories”>
Links or whatever
</div>

This would make your categories div effectively be 20% of the screen. I say effectively, because it would technically be all 100%, but the content would be confined to the 20% on the left.

Now, if this solution doesn’t work for you, I want to say, I think there is no shame in a layout table in this case, because there is no good solution. That’s what I would have done, except I wanted the content div to appear before the links div in the code.

7

For the proponents of “pure CSS, no tables” layout, the idea is you also have to rethink the format of your pages entirely, rather than try to emulate what tables can do.

But if you’re determined to have a layout that can easily be achieved by using tables - then use tables. That’s what I do.