Floating Footer

I have a layout with a four-column page. The content is dynamic, and I want
to have a footer that will float up or down depending on the content. I've
tried several approaches and can't get it to work.

Here's the page:

http://development2.holotech.net/portal/

If I give the footer item an bottom property, it disappears altogether. Any
ideas?

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:

I have a layout with a four-column page. The content is dynamic, and I want
to have a footer that will float up or down depending on the content. I've
tried several approaches and can't get it to work.

Here's the page:

http://development2.holotech.net/portal/

You've absolutley positioned everything which often causes trouble;
you have tables and font tags in there for no good reason and a lot of
the links don't work when JavaScript is disabled.

If I give the footer item an bottom property, it disappears altogether. Any
ideas?

Maybe this will help:
http://steve.pugh.net/test/test57.html (long content)
http://steve.pugh.net/test/test57a.html (short content)
The two pages have identical CSS and HTML just differeing amounts of
content to demonstrate the principle.

Works in most modern and some older browsers.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Carved in mystic runes upon the very living rock, the last words of
Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:

I have a layout with a four-column page. The content is dynamic, and I
want to have a footer that will float up or down depending on the
content. I've tried several approaches and can't get it to work.

Here's the page:

http://development2.holotech.net/portal/

You've absolutley positioned everything which often causes trouble;
I didn't know that.

you have tables and font tags in there for no good reason
Well, the tables are mainly placeholders until I get the CSS worked out,

then they'll become DIVs. I think I'm only using FONT tags for the CLASS
tag. From what I understand, it's largely a matter of preference whether
to use a FONT or SPAN tag to apply the style. Is there more to it than
that?

and a lot of the links don't work when JavaScript is disabled.
That's intentional. I generally don't use JS for anything but bells-and-

whistles stuff, but in this case I have a captive audience, so I put it
to use.

If I give the footer item an bottom property, it disappears
altogether. Any ideas?

Maybe this will help:
http://steve.pugh.net/test/test57.html (long content)
http://steve.pugh.net/test/test57a.html (short content)
The two pages have identical CSS and HTML just differeing amounts of
content to demonstrate the principle.

Thanks, I'll check it out.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:

Carved in mystic runes upon the very living rock, the last words of
Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:
Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:


http://development2.holotech.net/portal/

you have tables and font tags in there for no good reason
Well, the tables are mainly placeholders until I get the CSS worked out,
then they'll become DIVs. I think I'm only using FONT tags for the CLASS
tag. From what I understand, it's largely a matter of preference whether
to use a FONT or SPAN tag to apply the style. Is there more to it than
that?

When you have things like <p class="foo"><font
class="bar">text</font></p> there's usually no reason not to move the
styles from bar into foo and get rid of the font tags altogether.

and a lot of the links don't work when JavaScript is disabled.
That's intentional. I generally don't use JS for anything but bells-and-
whistles stuff, but in this case I have a captive audience, so I put it
to use.

Ah, see the name of the group? See the letters www? If you're not
authoring for the world wide web then you should say so in your
original post, otherwise it's assumed. And you may be better off
posting to an intranet specific group anyway.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Carved in mystic runes upon the very living rock, the last words of
Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:
Carved in mystic runes upon the very living rock, the last words of
Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:
Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:


http://development2.holotech.net/portal/

From what I understand, it's largely a matter of
preference whether to use a FONT or SPAN tag to apply the style. Is
there more to it than that?

When you have things like <p class="foo"><font
class="bar">text</font></p> there's usually no reason not to move the
styles from bar into foo and get rid of the font tags altogether.

But what if I want to apply a different style to some of the text within
the <p>?

and a lot of the links don't work when JavaScript is disabled.
That's intentional. I generally don't use JS for anything but
bells-and- whistles stuff, but in this case I have a captive audience,
so I put it to use.

Ah, see the name of the group? See the letters www? If you're not
authoring for the world wide web then you should say so in your
original post, otherwise it's assumed. And you may be better off
posting to an intranet specific group anyway.

Perhaps "captive audience" wasn't the correct term. This site will be on
the Web, but viewed mainly on the computers PTW provides for its guests.
Anyway, CSS is CSS, regardless of where it's served from, and that's what
I'm trying to work out.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:

When you have things like <p class="foo"><font
class="bar">text</font></p> there's usually no reason not to move the
styles from bar into foo and get rid of the font tags altogether.

Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:

But what if I want to apply a different style to some of the text within
the <p>?

Neither <font> nor <span> have any meaning on their own. But surely there's
a reason why do you want the different style. The meaning behind the
different style determines the appropriate markup.

Is the text supposed to be emphasized? <em>text</em>
Is the text supposed to be strongly emphasized? <strong>text</strong>
Is the text supposed to be an example of keyboard input? <kbd>text</kbd>
And so on...

If it helps, try to consider what happens when your CSS is ignored.
--
Darin McGrew, mcgrew (AT) stanfordalumni (DOT) org, http://www.rahul.net/mcgrew/
Web Design Group, darin (AT) htmlhelp (DOT) com, http://www.HTMLHelp.com/

"Cheaters never win; they just finish first." - Johhny Hart

Carved in mystic runes upon the very living rock, the last words of
Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:

http://steve.pugh.net/test/test57.html (long content)
http://steve.pugh.net/test/test57a.html (short content)
The two pages have identical CSS and HTML just differeing amounts of
content to demonstrate the principle.

OK, I get the basic idea, though I'm not sure I'm 100% clear on what it's
doing (still very new to CSS). However, trying to extrapolate your code
out to three (and ultimately four) columns, I get this:

http://development2.holotech.net/portal/steve.html

so there's obviously something I'm not getting.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Alan Little <alan (AT) n-o-s-p-a-m-phorm (DOT) com> wrote:

Carved in mystic runes upon the very living rock, the last words of
Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:

http://steve.pugh.net/test/test57.html (long content)
http://steve.pugh.net/test/test57a.html (short content)
The two pages have identical CSS and HTML just differeing amounts of
content to demonstrate the principle.

OK, I get the basic idea, though I'm not sure I'm 100% clear on what it's
doing (still very new to CSS). However, trying to extrapolate your code
out to three (and ultimately four) columns, I get this:

http://development2.holotech.net/portal/steve.html

so there's obviously something I'm not getting.

I've been working on a three column version today (with the added
twist of background colours that fill the whole height of the page)
and my current version is at
http://steve.pugh.net/test/test57-long.html

It's quite complex stuff. If you're looking for a quick fix then
you're best bet would be to hire a professional.

My experiments are based on the work of a lot of people, some of whom
have had the time to document what they've done:
http://www.positioniseverything.net/ordered-floats.html
http://www.fu2k.org/alex/css/index.mhtml
I can't find the page I stole the footer itself from.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

Carved in mystic runes upon the very living rock, the last words of
Steve Pugh of comp.infosystems.www.authoring.stylesheets make plain:

My experiments are based on the work of a lot of people, some of whom
have had the time to document what they've done:

http://www.positioniseverything.net/ordered-floats.html
http://www.fu2k.org/alex/css/index.mhtml

Nice resources. Thanks! The ordered-floats did the trick for me; I just
took his idea and extrapolated it to four columns:

http://development2.holotech.net/4c.html

That could probably be done better, but it works for me. I think I like
floating. So much to learn!

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/

Carved in mystic runes upon the very living rock, the last words of Alan
Little of comp.infosystems.www.authoring.stylesheets make plain:

Nice resources. Thanks! The ordered-floats did the trick for me; I just
took his idea and extrapolated it to four columns:

http://development2.holotech.net/4c.html

That could probably be done better, but it works for me. I think I like
floating. So much to learn!

Well, I claimed victory too soon. That layout does display nicely in IE,
but fails in NS and Opera. Interestingly, it works in IE because IE uses
a non-standard way of rendering floats. I hate to admit it, but in this
particular case, I find IE's rendition more intuitive than the standard.

Anway, I worked a bit more, trying various combinations of floats,
wrappers and various properties. I came up with a layout that works in IE
and Opera, but fails in NS. If I could come up with *any* four-column,
floating-footer layout that would work in NS, I could use server-side
code to select the appropriate stylesheet, but NS insists on refusing to
cooperate.

Well, I'm afraid that concludes this adventure into CSS for this newbie.
I need to get back on the clock and finish up this job so I can get paid.
Unfortunately that means I'm going to have to use tables. I like what
I've seen so far of CSS, but it definitely could be better. Probably the
most part of the problem is in implementation, but it seems to me the
standard could be done better. I could be wrong, that's just my first
impressions based on my admittedly limited experience so far.

I'll come back to this problem, as I want to bring my design skills up to
the level of my programming skills, but that's it for this round. Thanks
to those who helped.

--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/