Height equal to that of another div?

[Twey]

Right, well, to start:
Here's what I intend to achieve (this uses tables): http://en.crystallinity.co.uk/tutorials.php?id=1&tables
Here's my slightly pathetic attempt at achieving it (using CSS and DIVs): http://en.crystallinity.co.uk/tutorials/js/1/

The problem, as is fairly evident, is twofold: the fact that I can't get the .shaft DIV to stretch to fill its containing DIV vertically (thus matching the height of the .body DIV), and that blasted twenty-pixel white gap above said .shaft DIV. I've tried everything to get rid of that gap, but it just won't budge. As for the height, I used height: 100%, which I assumed to mean it would fill its containing DIV vertically, since it already has a width given by the taller of the two elements. However, it appears not.

I think I need to work on my CSS a little.

[mwinter]

[...] I can't get the .shaft DIV to stretch to fill its containing DIV vertically [...]

Place a container around the menu and content (hmm, already there...), and set the background image and colour on that container (you'll need to set an opaque background for the content to overlay the container).

An alternative, which is unworkable thanks to IE, would be to use a relatively-positioned container, and absolutely-position the menu rather than float it. With the top and bottom box offset properties set to zero (0), the menu would automatically stretch to the height of the container.

I can't think of any other solutions, at the moment.

[...] and that blasted twenty-pixel white gap above said .shaft DIV.

Remove the top margin of the level one heading.

As for the height, I used height: 100%, which I assumed to mean it would fill its containing DIV vertically, since it already has a width given by the taller of the two elements. However, it appears not.

Percentage values for the height property are computed against the height of the containing block, as you'd expect. However, the height property value of that containing block cannot be auto (the default), otherwise the nest element will use the auto value, too.

Though a percentage height property value can be computed from another percentage value,

#parent {
  height: 100%;
}
#child {
  height: 45%;
}

<div id="parent">
  <div id="child">
  </div>
</div>

the computed value for #child is still contingent on the container for #parent having a value other than auto for its height property.

Note that there's one exception, here: the root element (that is, the html element). A value of 100% for the height property here will be computed to mean the height of the viewport. However, some older browsers get this wrong, though this shouldn't be a disasterous failure.


Other comments

Navigation is impossible without scripting enabled as the menu contents start in their hidden state. If your site is meant to showcase client-side scripts, this could be overlooked (perhaps). If not, the script that shows the menu should also be responsible for hiding it in the first place.

I think the borders are intrusive. The content gets just less than 60% of the width at 1024x768, and starts in the lower half of the viewport. It just seems unbalanced with the content seemingly relegated to the right-hand side, allowing the surrounding decoration to dominate.

Mike

[Twey]

Remove the top margin of the level one heading.

h1 {
        font-weight: bolder;
        color: black;
        font-size: 2em;
        font-family: "Times New Roman", serif;
}

No top margin.

Navigation is impossible without scripting enabled as the menu contents start in their hidden state.

Agreed; I hadn't tested it without scripting yet, except without CSS. As I said, it's only an example page, and it's far from complete or even well-tested.

I think the borders are intrusive. The content gets just less than 60% of the width at 1024x768, and starts in the lower half of the viewport. It just seems unbalanced with the content seemingly relegated to the right-hand side, allowing the surrounding decoration to dominate.

True. Preferably I'd have stretched that border and used a percentage value; I'm still trying to think of a way to achieve it.

[mwinter]

Remove the top margin of the level one heading.

h1 {
        font-weight: bolder;
        color: black;
        font-size: 2em;
        font-family: "Times New Roman", serif;
}

No top margin.

The default margin, Twey.

It's not uncommon to see a rule such as

* {
  margin: 0;
  padding: 0;
}

to remove the default margins and padding on all elements. At the very least, this can help avoid problems where default style sheets differ among browsers as it's up to the author to respecify any and all spacing.

Mike

[Twey]

The default margin, Twey.

Yeah... I realized that roughly five minutes after leaving the house this morning

Your suggestions work almost perfectly; there's just one more thing (which I will, no doubt, kick myself after finding out): I went through my CSS and applied 100% height to all the ancestors of .shaft, but now the height of the menu container is now far larger than anything else on the page -- or, indeed, the viewport, at least at my resolution (1600x1200).