467,874 Members | 1,746 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,874 developers. It's quick & easy.

What's the best approach?

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.
Jul 20 '05 #1
  • viewed: 1834
Share:
14 Replies
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/
Jul 20 '05 #2
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/
Jul 20 '05 #3

"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
Jul 20 '05 #4

"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
Jul 20 '05 #5
In article <10*************@corp.supernews.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_Disclaimer>
It's Ensign Schrodinger! He's half-dead, Jim!

Jul 20 '05 #6
In article <10*************@corp.supernews.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_Disclaimer>
It's Ensign Schrodinger! He's half-dead, Jim!

Jul 20 '05 #7
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/
Jul 20 '05 #8
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/
Jul 20 '05 #9
On Wed, 21 Apr 2004 12:16:05 -0500, Michael Stemper
<ms******@siemens-emis.com> wrote:
In article <10*************@corp.supernews.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
Jul 20 '05 #10
On Wed, 21 Apr 2004 12:16:05 -0500, Michael Stemper
<ms******@siemens-emis.com> wrote:
In article <10*************@corp.supernews.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
Jul 20 '05 #11
In article Rijk van Geijtenbeek wrote:
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;}


will cause funny effects if borders or backgrounds are also used and
wrapping happens (most common reason to want shrink-wrap).

Better:

h1 {display:inline;}
h1 {display:table}

Works Opera 5+, Mozilla 1+, KHTML, degrades in IEs
or

h1 {float: left;}
Does not work on MacIE, but doesn't look bad either.
... 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.
I latter case, you also need clear:left for following element
Newish, and not as well supported:

h1 {display: inline-block;}


Afaik not supported by any browser, Opera 7 has broken support¹, bug
filed many ages ago. Makes much more sence to use display:table, as it
actually works. Of course you can't use display:table-cell or
display:table-row inside it, but why would you.

And people thinking it is abuse, should read CSS2 spec again.

[1] http://www.student.oulu.fi/~laurirai...block_bug.html

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #12
In article Rijk van Geijtenbeek wrote:
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;}


will cause funny effects if borders or backgrounds are also used and
wrapping happens (most common reason to want shrink-wrap).

Better:

h1 {display:inline;}
h1 {display:table}

Works Opera 5+, Mozilla 1+, KHTML, degrades in IEs
or

h1 {float: left;}
Does not work on MacIE, but doesn't look bad either.
... 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.
I latter case, you also need clear:left for following element
Newish, and not as well supported:

h1 {display: inline-block;}


Afaik not supported by any browser, Opera 7 has broken support¹, bug
filed many ages ago. Makes much more sence to use display:table, as it
actually works. Of course you can't use display:table-cell or
display:table-row inside it, but why would you.

And people thinking it is abuse, should read CSS2 spec again.

[1] http://www.student.oulu.fi/~laurirai...block_bug.html

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #13
*Rijk van Geijtenbeek* <ri**@opera.com>:
"I want this block-level element to be no wider than its content"?


h1 {float: left;}


For browsers working according to CSS 2.1, not CSS 2.0 that is.

--
Useless Fact #15:
America was named after the Ostrogoth royal house. Indirectly.
Jul 20 '05 #14
*Rijk van Geijtenbeek* <ri**@opera.com>:
"I want this block-level element to be no wider than its content"?


h1 {float: left;}


For browsers working according to CSS 2.1, not CSS 2.0 that is.

--
Useless Fact #15:
America was named after the Ostrogoth royal house. Indirectly.
Jul 20 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Hostile17 | last post: by
3 posts views Thread by Chris Transcend | last post: by
8 posts views Thread by Midnight Java Junkie | last post: by
2 posts views Thread by Andrew | last post: by
4 posts views Thread by Jeff | last post: by
184 posts views Thread by jim | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.