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.

[Brian]

BenOne© wrote:

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.
Fairly straightforward .
#heading {
width: 100% <--- this is so I can get a bottom border going right across
}
Unnecessary, as block level elements such as <div> and <h1> take up all
the available width unless you write css to suggest otherwise.
#menu {
height: 100%; <--- this is so I can get a right border going to page bottom.
}
Seems ok, but note that various versions of IE/Win need different things
to accomplish what should be a simple task. :(
<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>
Define a width for div#menu, in em units so it scales properly, and
float it left.
if I use position: relative for each section
As David Dorward stated in another thread: don't position if you don't
have to. With the html as you have it, you shouldn't need positioning.
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?
Table layout for your problem seems entirely unecessary, it's true.
Something to do with positioning no doubt.

No, float is the way. Very simple.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Brian]

BenOne© wrote:

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.
Fairly straightforward .
#heading {
width: 100% <--- this is so I can get a bottom border going right across
}
Unnecessary, as block level elements such as <div> and <h1> take up all
the available width unless you write css to suggest otherwise.
#menu {
height: 100%; <--- this is so I can get a right border going to page bottom.
}
Seems ok, but note that various versions of IE/Win need different things
to accomplish what should be a simple task. :(
<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>
Define a width for div#menu, in em units so it scales properly, and
float it left.
if I use position: relative for each section
As David Dorward stated in another thread: don't position if you don't
have to. With the html as you have it, you shouldn't need positioning.
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?
Table layout for your problem seems entirely unecessary, it's true.
Something to do with positioning no doubt.

No, float is the way. Very simple.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Jim Roberts]

"BenOne©" <no**@m.thanks. mate> wrote in message
news:or******** ***@192.168.11. 2...

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.

Hello,

http://nemesis1.f2o.org/templates.php

Some good layout examples can be found here. A google search for CSS layouts
will yield lots of results.

Regards,
Jim Roberts

[Jim Roberts]

"BenOne©" <no**@m.thanks. mate> wrote in message
news:or******** ***@192.168.11. 2...

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.

Hello,

http://nemesis1.f2o.org/templates.php

Some good layout examples can be found here. A google search for CSS layouts
will yield lots of results.

Regards,
Jim Roberts

[Michael Stemper]

In article <10************ *@corp.supernew s.com>, Brian writes:

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

Unnecessary, as block level elements such as <div> and <h1> take up all
the available width unless you write css to suggest otherwise.

I've found this out to my dismay. What (if any) would one write to
recommend "I want this block-level element to be no wider than its
content"?

--
Michael F. Stemper
#include <Standard_Discl aimer>
It's Ensign Schrodinger! He's half-dead, Jim!

[Michael Stemper]

In article <10************ *@corp.supernew s.com>, Brian writes:

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

Unnecessary, as block level elements such as <div> and <h1> take up all
the available width unless you write css to suggest otherwise.

I've found this out to my dismay. What (if any) would one write to
recommend "I want this block-level element to be no wider than its
content"?

--
Michael F. Stemper
#include <Standard_Discl aimer>
It's Ensign Schrodinger! He's half-dead, Jim!

[Brian]

Michael Stemper wrote:

What (if any) would one write to recommend "I want this block-level
element to be no wider than its content"?

display: table-cell;

Works in Opera 7+ (not sure about < 7).
Does not work in MSIE/Win.
Not sure about other browsers.

Or, you can float it without specifying a width. According to CSS2, the
element should still take 100% width. But many browsers ignored this,
and made width only as wide as necessary. If you take this route, be
careful with flow of elements that follow.

Works in MSIE/Win 5+ (I think).
Works in Opera.
Works in Mozilla.

Does not work in MSIE 5.x/Mac.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Brian]

Michael Stemper wrote:

What (if any) would one write to recommend "I want this block-level
element to be no wider than its content"?

display: table-cell;

Works in Opera 7+ (not sure about < 7).
Does not work in MSIE/Win.
Not sure about other browsers.

Or, you can float it without specifying a width. According to CSS2, the
element should still take 100% width. But many browsers ignored this,
and made width only as wide as necessary. If you take this route, be
careful with flow of elements that follow.

Works in MSIE/Win 5+ (I think).
Works in Opera.
Works in Mozilla.

Does not work in MSIE 5.x/Mac.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Rijk van Geijtenbeek]

On Wed, 21 Apr 2004 12:16:05 -0500, Michael Stemper
<ms******@sieme ns-emis.com> wrote:

In article <10************ *@corp.supernew s.com>, Brian writes:

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

Unnecessary, as block level elements such as <div> and <h1> take up all
the available width unless you write css to suggest otherwise.

I've found this out to my dismay. What (if any) would one write to
recommend "I want this block-level element to be no wider than its
content"?

h1 {display: inline;}

or

h1 {float: left;}

.... of course you have to make sure in some other way that line-breaks are
available were needed, for example by properly wrapping paragraphs of text
in <p> </p> tags.

Newish, and not as well supported:

h1 {display: inline-block;}

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen