473,724 Members | 2,279 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to make footer at the bottom in 5 box 3 columns layout

The site design is pretty simple:

=============== =============== ==============
| Head |
=============== =============== ==============
| | | |
| | | |
| left | center | right |
| | | |
| | | |
=============== =============== ==============
| Footer |
=============== =============== ==============

I wasted a whole month of my life with frustrating CSS layout try and
error (IE margin hack, quirk quark, float problems, IE peekaboo, etc.,
etc.).

So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.

But... How can I force the footer to stay at the bottom of browser
even if few content does not push it to the bottom. Is there any
chance with a combination of CSS and tables? Please no frame or
scripting. Impossible?

Any help would be very much appreciated.

Peter.
Jul 20 '05 #1
82 10685
Peter Diedrich <pd*******@gmx. de> wrote:
I wasted a whole month of my life with frustrating CSS layout try and
error (IE margin hack, quirk quark, float problems, IE peekaboo, etc.,
etc.).
I'm sorry you were unsuccessful with CSS. It can be very tricky to
accomplish what you want. However, there are several examples which sound
very close to what you want.
http://www.saila.com/usage/layouts/s...ayout-ie5.html
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.projectseven.com/whims/cs...oxnoscript.htm
http://glish.com/css/2.asp
So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.


Tables, while seemingly liquid, offer a poor solution to layout. Avoid them
if possible.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com
Jul 20 '05 #2
> I'm sorry you were unsuccessful with CSS. It can be very tricky to
accomplish what you want. However, there are several examples which sound
very close to what you want.
http://www.saila.com/usage/layouts/s...ayout-ie5.html
http://glish.com/css/7.asp
http://bluerobot.com/web/layouts/layout3.html
http://www.projectseven.com/whims/cs...oxnoscript.htm
http://glish.com/css/2.asp


Thanks for the hint. I studied all above well-known examples
thoroughly before but they *all* fail each in certain direction.
Either they have no footer (actually being asked in my initial
posting) or they behave strange in some browsers or have poor
"liquidicit y" (rigid side panels or ugly text overlapping when
narrowing the browser).

So I ended up using a simple table layout as it is easy as 1,2,3 and
is liquid as it can be.


Tables, while seemingly liquid, offer a poor solution to layout. Avoid them
if possible.


Mmmh, they simply render *perfectly*. No flaws - Compatible backwards
to HTML 2, rocket fast and slimmest possible code (compared to CSS
*including* all these nasty hacks required). CSS positioning appears
elegant on the paper only. It simply does not work as well as tables.
My simple table layout works so smooth ...except the footer.

Any further help?

Peter
Jul 20 '05 #3
Peter Diedrich <pd*******@gmx. de> wrote:
Thanks for the hint. I studied all above well-known examples
thoroughly before but they *all* fail each in certain direction.
Either they have no footer (actually being asked in my initial
posting)
Exactly how big do you need your footer? Can it be at the bottom of your
content, like the copyright at projectseven?
or they behave strange in some browsers or have poor
"liquidicit y" (rigid side panels or ugly text overlapping when
narrowing the browser).
Which browsers did this for you? Which designs? These were all tested to be
fine in the major browsers.
Mmmh, they simply render *perfectly*.
Have you ever listened to a layout table being rendered in a speach browser?
Or seen it rendered by a text-only browser like Lynx? Have you ever
considered that when tables were introduced in HTML 2 they were for tabular
data, not presentation?
rocket fast and slimmest possible code (compared to CSS
*including* all these nasty hacks required).
Tables making slim code? No, not really. They create more problems then
they're worth. CSS code, on the other hand, is cached by the browser and
most certainly does not require "nasty hacks."
CSS positioning appears
elegant on the paper only.
http://www.csszengarden.com/
It simply does not work as well as tables.
My simple table layout works so smooth ...except the footer.


One of the things people find hardest when switching to a CSS deign is
learning to let go of tabular, boxy designs. Consider writing your code as
simply and sematically correct as possible. Use h1, h2, h3, etc for
headings, <p> for paragraphs, lists for navigation lists, and so on. Once
it's been written and ordered correctly, then add some style. You don't have
to go overboard, and you'll find that if you make your pages simple and
structred the same, the same style sheet will work for any page.
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com
Jul 20 '05 #4
On 28 Feb 2004 10:28:43 -0800, pd*******@gmx.d e (Peter Diedrich) wrote:
But... How can I force the footer to stay at the bottom of browser
even if few content does not push it to the bottom. Is there any
chance with a combination of CSS and tables?
<rant>
Where on earth does this bizarre fetish for footers at the bottom of the
browser window come from? (I'm not getting at you personally but at all
the people who keep asking for this.)

If people are working in Word (or any other word-processor I have used)
page footers do not sit at the bottom of the window. Nor in Excel (or
any other spreadsheet I have used.) Nor in Access. Nor In PDF. Nor in
any e-mail program I can immediately recall. Nor any newsreader. Nor any
drawing program.

So why for ****'* **** do some people think it's necessary in a
browser?? The logical place for a footer is at the bottom of the page.
It does *not* need to be anywhere else.

If you have a problem with a footer half-way down your window there are
two simple and reliable solutions:

1) remove the footer, or
2) write some more content.

</rant>
Please no frame or scripting.


Ah OK, I see you're a good guy really. ;-)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #5
Peter Diedrich <pd*******@gmx. de> wrote:
But... How can I force the footer to stay at the bottom of browser
even if few content does not push it to the bottom. Is there any
chance with a combination of CSS and tables? Please no frame or
scripting. Impossible?


Stephen Poley's post got me thinking about your original question. Were you
thinking something along the lines of position: fixed;? If so, be warned
that it doesn't work in IE.

<div style="position : fixed; bottom: 0; left: 0;">Some footer stuff
here</div>

Then be sure your body has a bottom margin large enough to hold the footer
when the page reaches the bottom (and for IE, which will interpret "fixed"
as "absolute") .
--
Michael Wilcox
mjwilco at yahoo dot com
Essential Tools for the Web Developer - http://mikewilcox.t35.com
Jul 20 '05 #6


Stephen Poley wrote:
On 28 Feb 2004 10:28:43 -0800, pd*******@gmx.d e (Peter Diedrich) wrote:
But... How can I force the footer to stay at the bottom of browser
even if few content does not push it to the bottom. Is there any
chance with a combination of CSS and tables?
<rant>

[snip for peace sake] </rant>
Please no frame or scripting.


Ah OK, I see you're a good guy really. ;-)


I *do* hope the OP is still reading up to this point ;-)

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

Jul 20 '05 #7
On Sun, 29 Feb 2004 21:23:17 +0100, Stephen Poley
<sb************ ******@xs4all.n l> wrote:
Where on earth does this bizarre fetish for footers at the bottom of the
browser window come from? (I'm not getting at you personally but at all
the people who keep asking for this.)


Gee whiz, in magazines the footer's on the bottom of the sheet of paper
all the time!

Did you ever get the idea that flashy magazine layout has been the guiding
force of bad web design for a while now? Oftern I look at a magazine
article and marvel at hw much the layout reminds me of some awful webpage.
Jul 20 '05 #8
On Sun, 29 Feb 2004, Neal wrote:
Oftern I look at a magazine
article and marvel at hw much the layout reminds me of some awful webpage.


Sounds like a nasty case of reverse-engineering :-}
Jul 20 '05 #9
> Stephen Poley's post got me thinking about your original question. Were you
thinking something along the lines of position: fixed;? If so, be warned
that it doesn't work in IE.

<div style="position : fixed; bottom: 0; left: 0;">Some footer stuff
here</div>


That's exactly what I tried. And as you say, no joy in IE. Just try to
scroll the window and you see that CSS has another definition of
"bottom" as the browser. The footer scrolls and overlaps the content.
By the way, we speak of the most frequently used browser and not about
speech or pre-historian text only browsers ;-)

CSS is GREAT for styling text but a total failure in respect of liquid
layout. It is not your personal fault and I appreciate your
responsiveness but it is simply driving mad. Simplest things and top
most essential things like a "simple" footer which appears on billion
websites can't be done in CSS easily.

Yet another hack or browser switch thing? Another style sheet for IE?

Peter
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
4474
by: Tristan Miller | last post by:
Greetings. I have a two-column web layout, where the first column is just the regular body text with a "marign-right" of 16em, and the second column is an "absolute"-positioned div with a width of 16em. I would like to have a footer extending across the entire width of the page, at the very bottom of the page (i.e., after both columns end). How can I do this? There is no way of knowing in advance which of the two columns will be...
1
2981
by: Will Buntin | last post by:
I am trying to design my site without tables, using CSS for positioning and am having limited success. My main issue is I have a three column layout and my footer needs to run across the page, after the longest content from any column has finished. I've found a few examples and I thought I had mine set up correctly, but obviously something is wrong. So if there is any CSS expert out there willing to give me some tips... The page is...
7
2618
by: Andrew | last post by:
I've been struggling to achieve the following layout for some time now and I'm not getting anywhere. I've tried several approaches including floats & absolute positioning and none seem to work, primarily due to the footer not being aware of the columns due to me floating / positioning them. I have the following (very simple) markup: <div id="head">...</div> <div id="left">...</div>
0
8868
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9241
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9160
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9090
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8062
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4504
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3209
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2612
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2149
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.