What's the best approach?

[BenOne©]

Hi all,

I want to create a layout with a heading at the top and two columns below it,
with the left containing a menu, and the right containing the main content of
the page. I'd like the heading section to be as tall as it's content, the left
to be as wide as it's content, and the right to just fill the rest of the
screen. I don't want to use px sizes anywhere if possible, and even percentages
would be nice to avoid for the menu and content sections.

I can't find a decent explanation of positioning using absolute and relative, so
it's hard to understand why things appear where they do when I use certain
combinations. The use/terminology for position does not seem the least bit
intuitive.

Ideally I'd just like to specify the three sections and then put the content in
as below, but I think it doesn't work because the browser can't work out how big
or where to put the left and right bits in relation to the bits that have been
placed before them like the previous bits don't even exist yet. So they end up
simply overlapping.

#heading {
width: 100% <--- this is so I can get a bottom border going right across
}

#menu {
height: 100%; <--- this is so I can get a right border going to page bottom.
}

#content {
}

<div id=heading>
<h1>heading</h1>
</div>
<div id=menu>
<a href=home.html>home</a><br>
<a href=links.html>links</a><br>
<a href=about.html>about us</a>
</div>
<div id=content>
<h2>sub-heading</h2><br>
<p>Welcome to our home page, THE site for...</p>
</div>

Unfortunately stuffs just overlaps, and if I use position: relative for each
section, they just appear one after the other going down the page.

One site recommends creating two "rows", then one content div for the top row
and two content divs for the second row. They also also specify the column
widths for all, but I'd like to avoid that. Why do it that way? Something to do
with positioning no doubt.

Thanks for any help or links to good sites. I've tried ALA and glish.

--
Ben Thomas

Apparently less than 10% of accidents are caused by drivers exceeding the speed
limit.