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

Header, Footer, Content Layout using DIV and CSS?

P: n/a
Hi,

I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the browsers window.

So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px
and the content is defined as top:40px;bottom:40px;

This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement of
the content div, if a top statement is given.

How do I realize it correctly?
Aug 19 '06 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Grischa Brockhaus <z0****@arcor.dewrote:
>I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the browsers window.
A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.
>So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px
and the content is defined as top:40px;bottom:40px;
Given that the header and/or the footer contain text, using px units is
a bad decision, remember that you only have limited say over the text
size at the client end.
>This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement of
the content div, if a top statement is given.

How do I realize it correctly?
IE doesn't support CSS2 well enough to do what you want. You's also need
"position:fixed" support for the footer which IE also doesn't do.

The layout you want suffers from a serious problem, it requires
generating a scrollbar on the "content" div, in-document scroll bars are
a usability nightmare. The only half decent browser support for
in-document scrolling panes is through frames, and as I hope you know,
frames come with a raft of problems of their own.

So you'd do well to bin the idea.

--
Spartanicus
Aug 19 '06 #2

P: n/a
Spartanicus schrieb:
>I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the browsers window.

A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.
It holds advertisement images.
>So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px
and the content is defined as top:40px;bottom:40px;

Given that the header and/or the footer contain text, using px units is
a bad decision, remember that you only have limited say over the text
size at the client end.
Header and footer (nearly) contains images only.
>This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement of
the content div, if a top statement is given.

How do I realize it correctly?

IE doesn't support CSS2 well enough to do what you want. You's also need
"position:fixed" support for the footer which IE also doesn't do.
"absolute" works with firefox, too.
The layout you want suffers from a serious problem, it requires
generating a scrollbar on the "content" div, in-document scroll bars are
a usability nightmare. The only half decent browser support for
in-document scrolling panes is through frames, and as I hope you know,
frames come with a raft of problems of their own.
Scrollbars are no problem, too, the content div only holds an iframe (having scrollbars itself).

So.. Is there an answer to my problem not only a discussion about good and bad layout? I *have* to
do it that way, as the customer wants it that way. Is there a solution? Or do I have to go back to
tables and frames for this? :-/

Thanks for input..

Grischa
Aug 19 '06 #3

P: n/a
Grischa Brockhaus <z0****@arcor.dewrote:
>A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.

It holds advertisement images.
Let them scroll.
>Given that the header and/or the footer contain text, using px units is
a bad decision, remember that you only have limited say over the text
size at the client end.

Header and footer (nearly) contains images only.
Nearly doesn't suffice.
>IE doesn't support CSS2 well enough to do what you want. You's also need
"position:fixed" support for the footer which IE also doesn't do.

"absolute" works with firefox, too.
Try scrolling this: http://homepage.ntlworld.ie/spartanicus/temp2.htm
>The layout you want suffers from a serious problem, it requires
generating a scrollbar on the "content" div, in-document scroll bars are
a usability nightmare. The only half decent browser support for
in-document scrolling panes is through frames, and as I hope you know,
frames come with a raft of problems of their own.

Scrollbars are no problem, too, the content div only holds an iframe (having scrollbars itself).
Iframes have all the problems that regular frames suffer from with the
added disadvantage that clients support is not as good.
>So.. Is there an answer to my problem not only a discussion about good and bad layout?
This is a usenet discussion group, not your personal help desk. Propose
something here and we will discuss the implications, like it or not.
>I *have* to do it that way, as the customer wants it that way.
Customers rarely have a clue about web design, you don't have that
excuse. It's your job to deliver something that works well.
>Is there a solution? Or do I have to go back to
tables and frames for this? :-/
See my previous message.

--
Spartanicus
Aug 19 '06 #4

P: n/a
Spartanicus schrieb:
>Is there a solution? Or do I have to go back to
tables and frames for this? :-/

See my previous message.
Okay.. I have to find the solution on my own, I guess.. I didn't want to discuss abstract layout
stuff, I just had a simple question about fixing a DIV. I understand your point of view, but this
doesn't help here really..

To make it more accurate: I need an iframe in the middle of the page, having an dynamic height and
fixed distance to top and bottom. There is no way of getting rid of the IFrame, as this is the
meaning of the page.

At the moment I put it into a div and give the iframe a height of 100%, but I am not able to fix the
div the way I would like to have it. If there is another way of fixing an iframe this way, I would
be happy to hear about this. I know how to do this with javascript, but this is and looks very nasty
for my taste (dynamically adjusting the iframes height by reading the browser window height).

Thanks for your input anyway..

Grischa
Aug 19 '06 #5

P: n/a
Spartanicus schrieb:
>So.. Is there an answer to my problem not only a discussion about good and bad layout?

This is a usenet discussion group, not your personal help desk. Propose
something here and we will discuss the implications, like it or not.
Oh, I overlooked this one.

Yes, of course, you are right at this point. I didn't meant to disallow this, of course, I just
asked, if there is some input *beside* of this, that helps solving my problem.

Sorry, if I sound too rude, English is not my mothers tongue.

Grischa
Aug 19 '06 #6

P: n/a
Gazing into my crystal ball I observed Grischa Brockhaus
<z0****@arcor.dewriting in
news:44**********************@newsspool1.arcor-online.net:
To make it more accurate: I need an iframe in the middle of the page,
having an dynamic height and fixed distance to top and bottom. There
is no way of getting rid of the IFrame, as this is the meaning of the
page.

You have to be sure that the content is available for those that cannot
access an Iframe, it its content is that important.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Aug 19 '06 #7

P: n/a
AES
In article <p3********************************@4ax.com>,
Spartanicus <in*****@invalid.invalidwrote:
A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.
1) Many professional-caliber applications display workspace windows
with one or more toolbars across the top, another toolbar in a footer
across the bottom, and a scrollable workspace in between. These "footer
toolbars" may contain secondary tools, information boxes, buttons, or
useful links. I find this a very useful design concept (in competition
with floating palettes all over the screen or the workspace for example).

2) Many search engines, online forums, bibliographic reference sites,
travel booking sites, and professional-caliber online databases may
respond to a query with many tens of pages of information, often with
page lengths longer than normal screen heights at comfortable type sizes
and widths (with Google as just one prime example).

To step ahead by one or several pages in these applications, you
typically have to scroll to the bottom of the current page to get to the
Next and Previous buttons or the array of clickable page numbers -- and
the page you jump to will typically open scrolled to the top of the
page, so you have to scroll down again if you need to make another jump.

I can see why new pages should open this way; I have less understanding
why the links for further navigation can't be at the top rather than the
bottom of these pages. But it's another frequently occurring situation
where a fixed footer with navigation links in it could be very useful.
Aug 20 '06 #8

P: n/a
AES <si*****@stanford.eduwrote:
>A footer that remains in view is a poor design decision, it wastes
valuable screen real estate and for what? Very rarely is there a valid
reason to keep a footer visible at all times.

1) Many professional-caliber applications display workspace windows
with one or more toolbars across the top, another toolbar in a footer
across the bottom, and a scrollable workspace in between.
"Foot'er noun a line of type printed at the foot of each page
(printing); football (colloquial)."

(c) Larousse plc. All rights reserved

A UI bar at the bottom of the screen in so called "web-applications" is
not a footer.

--
Spartanicus
Aug 20 '06 #9

P: n/a
"Spartanicus" <in*****@invalid.invalidwrote in message
news:u1********************************@4ax.com...
[SNIP]
"Foot'er noun a line of type printed at the foot of each page
(printing); football (colloquial)."

(c) Larousse plc. All rights reserved

A UI bar at the bottom of the screen in so called "web-applications" is
not a footer.
What is it called to differentiate it from the banner at the top, the
sidebar for onsite navigation on the left, and the adbar for offsite
navigation (eg. sponsored sites, eCommerce, advertisements) on the right?

Thanks in Advance...

--
Timothy Casey GPEMC! >11950 is the nu****@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz
Aug 20 '06 #10

P: n/a
"Grischa Brockhaus" <z0****@arcor.dewrote in message
news:44***********************@newsspool2.arcor-online.net...
Hi,

I'm trying to produce a div layout containing a header on the top with
fixed height, a footer on the
bottom using fixed height and a content layer using what's left of the
browsers window.
>
So my header div is defined at top:0; height:40px , my footer is defined
as bottom:0; height:40px
and the content is defined as top:40px;bottom:40px;

This works very well with firefox but doesn't work with IE, as IE ignores
the bottom statement of
the content div, if a top statement is given.

How do I realize it correctly?
#1 There are print issues to be considered. Make sure that the foot banner
either disappears or is inserted into the flow for print media or it will
obscure text in the printout. There is a *_substantial_* market share held
by printed media as many people prefer to print a web page and take it into
the kitchen to read over a cup of coffee, or outside to read in the sun.
Keep your print media specification simple; B&W, no unnecessary margins,
etc. People who print your material will greatly appreciate your respect of
their economy.
#2 You need to use the Strict HTML 4.01 DTD for fixed containers to work
reliably, which makes frames unreliable and not valid.
#3 IE5, IE5.5, IE6, IE7 all put the scrollbar on the wrong side of the
container edge (inside) making it disappear altogether if the contained
containers are not positioned at least "right:16px".
#4 IE5, IE5.5, IE6, IE7 all then add the width of the scrollbar to 100% of
the width of the container, so if your scrolling container is supposed to be
100% of screen width and not going to put the scrollbar outside the browser
viewing area, its width needs to be set to 99% instead of 100%!
#5 You now have to write fairly equal code to both IE and Gecko, as IE7 now
reads the hierarchical references in a cascading style sheet just like Gecko
& Opera eg: body>div.content {margin:111px 95px 45px 165px}

Points #3 & #4 & #5 present an interesting little conundrum whose solution
leaves a less than equal presentation in browsers not using the IE engine.
This can be compensated for by making the background of the HTML element
equal in colour to the background of your fixed containers. For the
suspicious of mind, the tactic of ignoring key aspects of certain standards
is called, "Market Segmentation"...

I might suggest that branding and core navigation features such as menu
system and site information toolbar go in the head banner at the top,
localised navigation goes in the sidebar to the left, advertising and
eCommerce goes in the adbar to the right, and if required, qualifications
and reference buttons go in the foot banner along the bottom. See
www.fieldcraft.com.au for an example. Frames cannot be reliably applied
under the strict HTML 4.01 standard. In my experience, the Frameset version
of HTML 4.01 isn't quite so friendly to the practical application of fixed
containers.

On the use of iFrames...

If you are trying to keep the SPAM harvesters out of email contacts and
eCommerce buttons, then encrypt your eCommerce buttons and set your email
contact on an unindexed page (set robots metatag to "noindex,nofollow") by
itself with a suitable harvester trap and use mixed plain text, and various
forms of encoding for characters (some starting with #, some with %, & some
with &). The UAs get it but people out to make an easy buck generally don't
have the energy to code around little hurdles like this. Thanks to people
like the folks ate www.monkeys.com/wpoison, SPAMmers are getting the message
that if they don't want to have their databases poisoned all the time, they
have to leave unindexed pages alone.

If you are trying to hide your source code, talk to your hosting provider
and get it tucked away on the server to run server side. This ensures that
everyone benefits from your work and that the only people capable of
stealing your source code are those who wouldn't need it!

If the content is common to multiple pages, then use server side includes to
import from a single file.

Just some thoughts. Hope some of this is useful to you...

--
Timothy Casey GPEMC! >11950 is the nu****@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz
Aug 21 '06 #11

P: n/a
"Number 11950 - GPEMC! Replace number with 11950"
<nu****@fieldcraft.bizwrote:
>"Foot'er noun a line of type printed at the foot of each page
(printing); football (colloquial)."

(c) Larousse plc. All rights reserved

A UI bar at the bottom of the screen in so called "web-applications" is
not a footer.

What is it called to differentiate it from the banner at the top, the
sidebar for onsite navigation on the left, and the adbar for offsite
navigation (eg. sponsored sites, eCommerce, advertisements) on the right?
There are few commonly agreed on names for non framed site sections.
Some options are "Navbar", "Sidebar" and "Panel". The adjectives "Top",
"Left", "Right" and "Bottom" can be added to refer to position on
screen.

"Footer" was an established phrase from the print world that is now also
used for web pages. It should refer to a blurb that appears beneath the
content section of a site, a typical example would be a copyright blurb.
Ergo a panel can appear below a footer .

--
Spartanicus
Aug 21 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.