2-Column Layout -- Verticle Problem

[Tamblyne]

This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post on-point, but no one
responded to it.)

I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.

In the past, I've stumbled on the solution to this problem (and now
can't remember how I did it), or I've just added an empty div at the
bottom of the content div to "pad" the bottom of it so it's long enough.
Lame, I know. And it doesn't work on dynamically generated pages,
only static ones.

Both "content" and "navigation" are within a "container" div, so why
doesn't the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?

I feel really stupid -- I'm sure I'm missing something basic. But I'm
revisiting this problem again after a year and have no idea where to
start to solve it.

TIA

[Shawn Wilson]

You're right, it's a common problem. The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS. None
the less, everyone who tries to use CSS instead of tables runs into this
pretty quickly.

What you're trying to accomplish is called a 'faux' layout, and with CSS
it's not easy. The only 'reliable' way to do it is to use JS to dynamically
change the height of your DIVs. Unless of course you can work in fixed
heights, but normally that's not an option in this kind of layout.

Of course, you could just go back to a table layout and viola! But I guess
I'm going to hell for suggesting tables in a CSS group. Nevermind the fact
that all your problems would go away if you used a table. It's so funny to
me how CSS people try SOOOO hard to get rid of tables just to say 'look,
haha, I have no tables' when in many cases a simple table or two would have
eliminated 50 lines of CSS and/or JS code.

And before anyone flames me, I'm a big fan of abolishing the tables nested
within tables to like the 10th level - but after trying to avoid tables all
together for layouts for about a year and running into this exact problem to
no end - I'm ok with one or two tables when it allows me to avoid JS or tons
of CSS code.

I have a pretty simply JS solution if you'd like it. It's attached and is 3
files. One HTML with the layout, one CSS with the styles, and on JS with
the script.

The logic behind it is that the DIVs all have no height specified, but the
JS figures out which one of the 3 DIVs are the longest and changes the
height of the other two to that height.

You can adapt it to any number of DIVs without too much trouble. I haven't
tried it on every browser or platform out there because it's my own little
work-around when I just feel the need to be complicated instead of just
using a table. I know it works on IE 6 / WinXP though, but you might want
to vet it with other setups.

Hope that helps.

------------
Shawn Wilson

"Tamblyne" <Ta******@noyahoospam.com> wrote in message
news:11*************@corp.supernews.com...

This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post on-point, but no one
responded to it.)

I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.

In the past, I've stumbled on the solution to this problem (and now
can't remember how I did it), or I've just added an empty div at the
bottom of the content div to "pad" the bottom of it so it's long enough.
Lame, I know. And it doesn't work on dynamically generated pages,
only static ones.

Both "content" and "navigation" are within a "container" div, so why
doesn't the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?

I feel really stupid -- I'm sure I'm missing something basic. But I'm
revisiting this problem again after a year and have no idea where to
start to solve it.

TIA

[Spartanicus]

"Shawn Wilson" <sh****@dvigroup.net> wrote:

You're right, it's a common problem.
There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message.
The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS.
No new version of CSS is required for emulating most HTML table layouts,
this is provided for by CSS 2.0 (but not supported by IE).
Of course, you could just go back to a table layout and viola! But I guess
I'm going to hell for suggesting tables in a CSS group.
Using a table for creating a layout has its advantages.
Nevermind the fact that all your problems would go away if you used a table.
Using a table for layout can also create quite a few problems.
I have a pretty simply JS solution if you'd like it. It's attached and is 3
files.

Don't post attachments here, upload it, post the url.

--
Spartanicus

[Spartanicus]

Tamblyne <Ta******@noyahoospam.com> wrote:

I'm sure I'm missing something basic.

So are we, like an url to the problem so that we can see what you are
talking about.

--
Spartanicus

[Rincewind]

On Wed, 31 Aug 2005 19:10:02 GMT, Shawn Wilson wrote:

You're right, it's a common problem. The problem lies in the fact that CSS
does not reliably stretch vertically like tables do. That may or may not
change as time goes on with newer browsers and newer versions of CSS. None
the less, everyone who tries to use CSS instead of tables runs into this
pretty quickly.

What you're trying to accomplish is called a 'faux' layout, and with CSS
it's not easy. The only 'reliable' way to do it is to use JS to dynamically
change the height of your DIVs. Unless of course you can work in fixed
heights, but normally that's not an option in this kind of layout.

Of course, you could just go back to a table layout and viola! But I guess
I'm going to hell for suggesting tables in a CSS group. Nevermind the fact
that all your problems would go away if you used a table. It's so funny to
me how CSS people try SOOOO hard to get rid of tables just to say 'look,
haha, I have no tables' when in many cases a simple table or two would have
eliminated 50 lines of CSS and/or JS code.

And before anyone flames me, I'm a big fan of abolishing the tables nested
within tables to like the 10th level - but after trying to avoid tables all
together for layouts for about a year and running into this exact problem to
no end - I'm ok with one or two tables when it allows me to avoid JS or tons
of CSS code.

I have a pretty simply JS solution if you'd like it. It's attached and is 3
files. One HTML with the layout, one CSS with the styles, and on JS with
the script.

The logic behind it is that the DIVs all have no height specified, but the
JS figures out which one of the 3 DIVs are the longest and changes the
height of the other two to that height.

You can adapt it to any number of DIVs without too much trouble. I haven't
tried it on every browser or platform out there because it's my own little
work-around when I just feel the need to be complicated instead of just
using a table. I know it works on IE 6 / WinXP though, but you might want
to vet it with other setups.

Hope that helps.

------------
Shawn Wilson

"Tamblyne" <Ta******@noyahoospam.com> wrote in message
news:11*************@corp.supernews.com...

This problem has got to have a simple solution and I can't be the first
person who has ever handled it. Perhaps Google is no help because I'm
not using the right terms? (I did find one post on-point, but no one
responded to it.)

I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.

In the past, I've stumbled on the solution to this problem (and now
can't remember how I did it), or I've just added an empty div at the
bottom of the content div to "pad" the bottom of it so it's long enough.
Lame, I know. And it doesn't work on dynamically generated pages,
only static ones.

Both "content" and "navigation" are within a "container" div, so why
doesn't the "container" div expand to contain both of them, with the
footer tucked neatly under the "container"?

I feel really stupid -- I'm sure I'm missing something basic. But I'm
revisiting this problem again after a year and have no idea where to
start to solve it.

TIA

Tamblyne look at my reply to the post "fixed width, 2 column CSS layout
problem" it has the answer to what you want I think, the contents "box" can
be empty and all the other"boxes" stay in position.

Shawn, please do not top post. And Javascript is not the only way to do it.

[Spartanicus]

Rincewind <th***********@hotmail.com> wrote:

Shawn, please do not top post.

Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.

--
Spartanicus

[Shawn Wilson]

I'll try to follow better etequite.

Have to ask though, 'top post' ? I replied to the only message I saw, there
were no replies under that message to reply to instead...

----------
Shawn Wilson

"Spartanicus" <in*****@invalid.invalid> wrote in message
news:el********************************@news.spart anicus.utvinternet.ie...

Rincewind <th***********@hotmail.com> wrote:

Shawn, please do not top post.

Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.

--
Spartanicus

[Shawn Wilson]

"Shawn Wilson" <sh****@dvigroup.net> wrote in message
news:yG*******************@fe02.news.easynews.com. ..

I'll try to follow better etequite.
I'll try to spell better as well... etiquette - wow...

--------------
Shawn Wilson

"Shawn Wilson" <sh****@dvigroup.net> wrote in message
news:yG*******************@fe02.news.easynews.com. .. I'll try to follow better etequite.

Have to ask though, 'top post' ? I replied to the only message I saw,
there were no replies under that message to reply to instead...

----------
Shawn Wilson

"Spartanicus" <in*****@invalid.invalid> wrote in message
news:el********************************@news.spart anicus.utvinternet.ie...

Rincewind <th***********@hotmail.com> wrote:

Shawn, please do not top post.

Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.

--
Spartanicus

[Jim Moe]

Shawn Wilson wrote:

Have to ask though, 'top post' ? I replied to the only message I saw, there
were no replies under that message to reply to instead...

"Top posting" is putting your reply first and what you are replying
below it. You top posted. I have bottom posted.
It is a simple mail/newsgroup setting.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Shawn Wilson]

"Spartanicus" <in*****@invalid.invalid> wrote:

There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message.

If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?

----------------
Shawn Wilson

[Rincewind]

On Wed, 31 Aug 2005 19:30:54 GMT, Spartanicus wrote:

Rincewind <th***********@hotmail.com> wrote:

Shawn, please do not top post.

Worse than top posting is not snipping, thereby requiring everyone to
scroll down to read one or two added lines.

Really!

[Els]

Shawn Wilson wrote:

"Spartanicus" <in*****@invalid.invalid> wrote:

There is a posting convention in this group: configure your software to
inject an attribution line on top, snip what you are directly responding
to to a minimum, and put your reply beneath it, thus creating an
interspersed message.

If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?

Download OE-Quotefix. It will help to post proper messages, including
attribution lines.
That is, if you wanna do it even better, download a newsreader like
Xnews or Dialog.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Talk Talk - Such A Shame

[Shawn Wilson]

"Els" <el*********@tiscali.nl> wrote:

Shawn Wilson wrote:

If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?

Download OE-Quotefix. It will help to post proper messages, including
attribution lines.
That is, if you wanna do it even better, download a newsreader like
Xnews or Dialog.

I roam to various PCs here at work, wouldn't be viable to go installing a
new program everywhere just for this... I'll just learn to do it better
myself.

Is THIS message acceptablly formatted?

------------
Shawn Wilson

[Tamblyne]

Rincewind wrote:

Tamblyne look at my reply to the post "fixed width, 2 column CSS layout
problem" it has the answer to what you want I think, the contents "box" can
be empty and all the other"boxes" stay in position.

Thank you -- I saw the OP, but didn't see your reply. At the outset, it
does look like it will solve my problem.

Thank you for your courtesy. :-)

[Els]

Shawn Wilson wrote:

"Els" <el*********@tiscali.nl> wrote:

Shawn Wilson wrote:

If I may ask as well... 'configure your software to inject an attribution
line' I'm assuming you mean the "so and so" wrote: line?

Can this be done with OE automatically?
Download OE-Quotefix. It will help to post proper messages, including
attribution lines.
That is, if you wanna do it even better, download a newsreader like
Xnews or Dialog.

I roam to various PCs here at work, wouldn't be viable to go installing a
new program everywhere just for this... I'll just learn to do it better
myself.

Good plan :-)
Is THIS message acceptablly formatted?

Yup, except for one thing, but I think OE can't handle that, IIRC.
It's the sig separator. If you use "-- " (dash dash space) on one
line, the following signature will be snipped automatically by the
newsreaders of people who reply to your message.
IIRC though, OE doesn't see the space at the end.

OE-Quotefix btw, is not a different program, just a sort of plugin for
OE. It doesn't take away any of the normal functionality of OE, just
adds a little.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Yes - Roundabout

[rf]

Tamblyne wrote:

I have a two column layout with a header and a footer. If the "content"
is longer than the "navigation", there is no problem. However, if the
content is shorter than the navigation, the navigation menus extend down
the page, but the footer is directly under the content, so it overlaps
the bottom of the navigation menus, instead of being below. And I'm
having this problem whether I use float, absolute or relative positioning.

Add clear: left (or clear: both) to the CSS rule selecting the footer.

Cheers
Richard.