By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,624 Members | 2,229 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,624 IT Pros & Developers. It's quick & easy.

What's the best approach?

P: n/a
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
Share this Question
Share on Google+
14 Replies


P: n/a
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

P: n/a
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

P: n/a

"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

P: n/a

"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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
*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

P: n/a
*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.