25 replies [Last post]
lingoist
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2005-04-27
Posts: 5
Points: 0

Hello everybody!

A very often asked question I guess but I wasnt able to find a crossbrowser/crossplatform solution - and I think there is none.

Please see http://www.lingoist.com/examples/example1.htm
as you can see the footer is at the bottom of the page (using tables)

Now see http://www.lingoist.com/examples/example2.htm
as the content stretches over the viewport the footer moves down

any solution to solve that in CSS with divs and without tables?
dont think so but would be happy if someone could surprise me... Wink

thanks a lot for your input!
p.s.: should also work on Macintosh Browsers (IE, Safari, ...)

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

A potential solution is to use a hidden floated column of a height approximately equivalent to the height of the viewport less the height of the footer. Clearing the footer will ensure it appears below the lowest of the hidden column and any other columns in your layout.

position:fixed will get you a footer that stays on the screen all the time. You will need to google for IE solutions that mimic its behaviour.

Or finally, consider just how necessary, having a footer at the bottom of the viewport really is.

lingoist
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2005-04-27
Posts: 5
Points: 0

Footer at bottom of the page

Chris..S wrote:
A potential solution is to use a hidden floated column of a height approximately equivalent to the height of the viewport less the height of the footer. Clearing the footer will ensure it appears below the lowest of the hidden column and any other columns in your layout.

That wont work if the content of the page exceeds the viewport...or maybe I didnt get your idea...

Chris..S wrote:
position:fixed will get you a footer that stays on the screen all the time. You will need to google for IE solutions that mimic its behaviour.

well I dont want that, do I? I know about that solution but its not what I was looking for...

Chris..S wrote:
Or finally, consider just how necessary, having a footer at the bottom of the viewport really is.

Well, how necessary is design at all...?

Thanks anyways...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Footer at bottom of the page

Having been rather dismissive of Chris's attempts at being helpful, please explain what you actually want to achieve.

Your two examples just show a natural behavior one without content but with a height 100% holding the footer at the bottom, the other with content scrolling of the screen taking the footer with it as would be expected. Is the behavior in the second example what you expect to see as your not really making it clear.

You could, as per the suggestion that Chris made fix the footer to the bottom of the viewport and have the content scroll behind it but it's tricky to get working in IE, but you say out of hand that this is not what your looking for.

It sounds as though you actually want to know how to use height 100% on a wrapper so that if the content falls short of the viewport height the wrapper will nonetheless always take up the full height with the footer stuck to the bottom as Chris has suggested this is achievable using, as he mentions, a hidden element to keep the footer at the bottom or using position absolute to stick the footer to the bottom of the wrapper.

You need to Google on CSS height 100% to find the methods to employ height 100% in CSS layouts or do a search in this forum as the subject has been covered quite often.

I would help if you could clarify slightly the results that you are looking for here.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

lingoist wrote:
Chris..S wrote:
A potential solution is to use a hidden floated column of a height approximately equivalent to the height of the viewport less the height of the footer. Clearing the footer will ensure it appears below the lowest of the hidden column and any other columns in your layout.

That wont work if the content of the page exceeds the viewport...or maybe I didnt get your idea...

Aye, it will.

It works on the same principle as normal floated multi-column layouts with footers. With these layouts the footer always appears below the largest column. If you set the height of one column to approximately the height of the view port less footer, you effectively set a min. height below which the footer will always appear. The difficulty is in getting the height of the spacer column correct.

Here you go... (demo page)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>CSS Tester</title>
<style type="text/css">
<!--
/*  Notes on dimension relationships
 *
 *  - w is independent of x,y,z and can use any units
 *  - x, y, z, should probably use the same units and with any gaps between the columns should
 *    not add to more than the width of #wrap_outer.
 *  - #wrap_outer width is given as special.  it doesn't need to be set explicitly, if, e.g. you 
 *    use margins to control its width.  the key is that x+y+z+gap1+gap2 must add to no more than
 *    the final width of #wrap_outer
 *  - for the benefit of IE, % widths should add to less than 100%.
 *
 *  #banner {height:w; height: h;}
 *  #wrap_outer {width: special}
 *  #wrap_inner {width:x+y+gap; margin-top: h;}
 *  #left {width: x;}
 *  #main {width: y;}
 *  #right {width: z; margin-top: h;}
 *  #footer {height: f;}
 *  #spacer {margin-bottom: -f;}
 */
 
/* layout styles */ 
html, body, #wrap_outer {height:100%;}
html, body {margin:0; border:0; padding:0;}

#banner {position:absolute; height:50px; width:100%; left:0; top:0;}
#wrap_outer {position:relative; margin:0 auto; width:80%;}
#wrap_inner {float:left; width: 70%; display:inline; margin-top:50px;}
#left {float:left; width: 20%; display:inline;}
#main {float:right; width: 80%; display:inline;}
#right {float:right; width: 29.7%; display:inline; margin-top:50px;}
#footer {clear:both; height: 20px; width:100%;}

#spacer {float:left; width:1px; height:100%; display:inline; margin-bottom:-20px; margin-right:-1px; display:inline; }

/* end layout styles */

/* presentation styles */
body {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;}
#footer {text-align:center;}
#right {font-size: 85%;}
#left {font-size:75%;}

#menu {margin:0; padding:0; border-top:1px solid #999;;}
#menu li {list-style:none; margin:0; padding:0; border:1px solid #999; border-top:0;}
#menu li a {display:block; padding: 3px 5px;}
#menu li a:hover {background-color: #f93;}

/* colour coding, to differentiate between the different layout regions in this example */
#banner {-moz-opacity:0.6; filter:alpha(opacity=60);}
#wrap_inner, #footer {-moz-opacity:0.9; filter:alpha(opacity=90);}
#left, #right, #main {-moz-opacity:0.9; filter:alpha(opacity=90)}

#banner {background-color:#fcc;}
#wrap_outer {background-image:url(/images/hatch-left.gif);}
#wrap_inner {background-image:url(/images/hatch-right.gif);}
#left {background-color: #cfc;}
#main {background-color: #9c9;}
#right {background-color: #aea;}
#footer {background-color:#ccf;}
#spacer {background-color:red;}

-->	
</style>
</head>
<body>
<div id='wrap_outer'>
  <div id='wrap_inner'>
    <div id='main'>
    <!-- your main content goes here -->
	    <h4>Notes</h4>
		<p>transparency has been used to allow the background of all layout elements 
		to show on the page at once.</p>
		<ol>
		  <li>#outer_wrap, has a single hatched background, top-left to bottom right</li>
		  <li>#inner_wrap, has a single hatched background, bottom-left to top right</li>
		</ol>
		<h2><strong>Lorem Ipsum dolor</strong></h2>
		<p>Lorem ipsum dolor ...</p>
    <!-- end main content -->
   </div>
   <div id='left'>
   <!-- your left sidebar content goes here -->
     <h4>menu</h4>
	 <ul id='menu'>
	   <li><a href="#" title="some title">some link</a></li>
	   <li><a href="#" title="some title">some link</a></li>
	   <li><a href="#" title="some title">some link</a></li>
	   <li><a href="#" title="some title">some link</a></li>
	   <li><a href="#" title="some title">some link</a></li>
	 </ul>
   <!-- end left content -->
   </div>
  </div> <!-- wrap_inner -->
  <div id='right'>
  <!-- your right sidebar content goes here -->
		<h4>fancy right hand side content...</h4>
		<p>lorem ispum ...</p>
  <!-- end right content -->
  </div>
  <div id='spacer'></div>
  <div id='footer'>
    <!-- footer content goes here -->
    &copy; 2005 me.
    <!-- end footer content -->
  </div>
  <div id='banner'>
    <!-- banner stuff goes here -->
    all your banner content here
    <!-- end banner content -->
  </div>
</div> <!-- outer_wrap -->
</body>
</html>

Only the "layout" styles are necessary in the code above. The demo page has visibility:hidden commented out on #spacer, so you can see #spacer as the narrow red line running in the gap between the right hand column and the center column.

The spacer div html can be placed anywhere within #wrap_outer prior to #footer (it must remain a direct child of #wrap_outer), as it effectively takes up zero space.

The same basic principle can be applied to other multi-column layouts, irrespective of the number of columns or there order.

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Footer at bottom of the page

lingoist wrote:
Chris..S wrote:
Or finally, consider just how necessary, having a footer at the bottom of the viewport really is.

Well, how necessary is design at all...?

Lingo, my friend, that really does sound just a little bit 'stroppy'! Chris WAS suggesting a design issue - remember that you're designing for the web and not paper!!! Smile

Anyway, I found your question compelling enough to dig out this effort from a while back. It seems pretty consistant between Firefox 1.0.3, IE6 and Opera 8, and doesn't use absolute positioning! The only problem is that it's untested on a Mac (but really it's down to whether the two specified Mac browsers support height percentages).

I'd love to take the credit for it, but it comes from a posting at the WebmasterWorld fora.

Hope that might help (and if you or anyone can give us some Mac-browser feedback, such as whether it fails, and if it does, HOW it fails, then that would be more than useful, too!!)

cheers,

Stuart

[EDIT: Whoops! Chris beat me to it - makes mine look a bit crappy now, eh!?!? :)]

[EDIT 2: found the relevant Webmaster World page - big shout out to SuzyUK!!]

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

Stuart, thats the same basic principle however it misses a couple of tricks.

it uses height:95%
instead of height:100% AND margin-bottom: -(height of footer)

it messes around with 2px width, when 1px width, -1px margin-right and visibility:hidden ensure the spacer will take up no screen room and even in an accident can't put any content on the screen.

for source ordering reasons, you probably want the spacer to appear as far into your html as possible.

I don't have access to mac browsers to see how the demo posted above will work in them (or IE5(win)). Works ok in IE6, FF & O7.51

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Footer at bottom of the page

Chris..S wrote:
it uses height:95%
instead of height:100% AND margin-bottom: -(height of footer)

Absolutely, my inclination would be to go that way too - I was wondering about Mac IE and negative margins though...

Chris..S wrote:
it messes around with 2px width, when 1px width, -1px margin-right and visibility:hidden ensure the spacer will take up no screen room and even in an accident can't put any content on the screen.

The 2px is there for demo-ing (God, did I just write that word!?!?) purposes only - again, I agree entirely with you, but will our friend Mac IE...? Smile

Chris..S wrote:
for source ordering reasons, you probably want the spacer to appear as far into your html as possible.

Good point (and one that not enough people take note of!) Didn't even consider it - I just posted something that I already had!!

Update: both yours and mine look fine (as suspected) on Safari 1.3, but they both lose the footer on Mac IE 5.2.3.

I don't know how long these will be available, but here's screengrabs of yours and mine on Safari, and yours and mine on Mac IE 5.2.3 - could Mac IE be out of reach?? Smile

regards,

Stuart

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

Great page, Stuart. Do you know of a similar one with Windows (IE5 or 5.5 in particular) or Linux browsers?

IE5(Mac) also messed up the banner element in mine. Simple solution for that is to move it to be the first child of #wrap_outer and to set margin-top to 0 for both #wrap_inner & #right.

I might have a play around later and see if I can come up with something that isn't too bad in IE5(mac).

lingoist
Offline
newbie
Last seen: 16 years 31 weeks ago
Joined: 2005-04-27
Posts: 5
Points: 0

Footer at bottom of the page

Thanks Chris and Stuart!
That was what I was looking for...Unfortunately I got no Mac here so I cant test right now.
As soon as I come up with a crossbrowser/crossplatform solution I will post it here!

P.s.: Also thanks to Hugo for offering your help!

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Footer at bottom of the page

Chris..S wrote:
Great page, Stuart. Do you know of a similar one with Windows (IE5 or 5.5 in particular) or Linux browsers?

Only Browsercam (they offer a free trial, but I haven't tried them since they updated the service)

Stuart

Stuart
Stuart's picture
Offline
Enthusiast
UK
Last seen: 17 years 40 weeks ago
UK
Joined: 2004-02-27
Posts: 107
Points: 0

Footer at bottom of the page

...and, just for future reference, Exploring Footers from ALA talks about using the so-called 'W3C DOM cavalry' for Mac IE5 support

Stuart

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Footer at bottom of the page

Chris..S wrote:
Stuart, thats the same basic principle however it misses a couple of tricks.

it uses height:95%
instead of height:100% AND margin-bottom: -(height of footer)

Hi there, If I change the doctype to standard, not quirk and have a following

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> ReDesign </TITLE>
<STYLE>
html,body
{
margin:0px;
background:yellow;
height: 100%;
overflow:auto;
}
#MovieLine
{
position:absolute;
left:500px;
width:120px;
height:100%;
background:silver;
margin-top:10px;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID="MovieLine"></DIV>
</BODY>
</HTML>

My MovieLine just "jumps 10 px down" and create an scroll. This wasn't the suppose, it was suposed to leave a margin at the top and fill down to pagebottom...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

Hi StibPelle,

You really should start a new thread for a new question. Post a link to another thread if its relevant to what you are discussing.

To answer the question, you need to understand the box model used by compliant browsers. This diagram explains things pretty well. Essentially, the vertical space an element occupies is the sum of its height AND its margins, borders, padding (top and bottom). When you use a percentage value for height, that percentage is based on the height of its parent or in the case of an position:absolute element the element which defines the positioning context it is operating within.

So in your case you have
html - 100% (the full viewport height)
body - 100% of html (the full viewport height)
#MovieLine - 100%+10px (10px larger than the viewport).

Because #MovieLine is higher than the viewport, a scroll bar is necessary to show the bottom.

Note, you shouldn't need to use margins on position:absolute elements, since they aren't in the document flow they don't have anything to push against. It makes more sense to use top, left, right, bottom.

Anyways, read up on the CSS box model, understanding that correctly is one of the keys to successfully using CSS for layout.

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Footer at bottom of the page

Chris..S wrote:
Hi StibPelle,

You really should start a new thread for a new question. Post a link to another thread if its relevant to what you are discussing.

Hi Chris!

Well, I thought my thread was related to thhis topic, otherways I would have start a new thread as I did about the footer.

Chris..S wrote:
To answer the question, you need to understand the box model used by compliant browsers.

As far as I have learned, declare it full makes IE go in standard mode, the box model is only regarded to the quirk mode.

Perhaps I'm totally wrong, excuse me for that.
but ow do you set a div making it cover ALL area between say 10px from top down to 10px from bottom, fluid?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

In a compliant browser:

#mydiv {
position:absolute;
top:10px;
bottom:10px;
left:0;
width:100%;
}

should do it. IE has problems with using top & bottom together (also using left and right together).

You could let IE/win work in quirks mode then

* html #mydiv {
position:absolute;
height:100%;
padding: 10px 0;
width:100%;
}

should work.

But, the real question is what are you trying to achieve with this <div>. A way to mimic position static for IE? A graphic background that will cover the whole viewport except the top and bottom 10px? Something else?

Depending on what you are after, I suspect there will be other methods of getting the same appearance. Its just a matter of looking at the problem from another perspective.

StibPelle
Offline
Regular
Last seen: 14 years 16 weeks ago
Timezone: GMT+1
Joined: 2004-07-01
Posts: 22
Points: 0

Footer at bottom of the page

Chris..S wrote:
In a compliant browser:

#mydiv {
position:absolute;
top:10px;
bottom:10px;
left:0;
width:100%;
}

should do it. IE has problems with using top & bottom together (also using left and right together).

You could let IE/win work in quirks mode then

* html #mydiv {
position:absolute;
height:100%;
padding: 10px 0;
width:100%;
}

should work.
Yes, this is a way to achive it, but isn't quirk mode something to avoid?

Chris..S wrote:
But, the real question is what are you trying to achieve with this <div>. A way to mimic position static for IE? A graphic background that will cover the whole viewport except the top and bottom 10px? Something else?

Depending on what you are after, I suspect there will be other methods of getting the same appearance. Its just a matter of looking at the problem from another perspective.

I wanna try to get rid of a frameset using specified height for bort header and absolute footer. Smile
And YES, it is tricky, I know but it is a must to have the footer absolute bottom. Sad

bmelloni
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

Footer at bottom of the page

Stuart wrote:
...and, just for future reference, Exploring Footers from ALA talks about using the so-called 'W3C DOM cavalry' for Mac IE5 support

Based on the article it seems that CSS2 layouts are less flexible than table-based layouts, primarily because position:absolute is the only way to make proper layouts without tables, but it takes the elements out of the calculations of "remaining free space". So, the only way to correct this is with a whole bunch of javascript.

On top of everything, they are deprecating 100% heights... makes you wonder what they were smoking when they came up with the standard... you don't deprecate something until you provide a replacement that works *all the time*.

This is such basic functionality, but frustrating as heck.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

bmelloni wrote:
they are deprecating 100% heights...

I think you may have misread or misunderstood something. Do you care to share your source?

bmelloni
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

Footer at bottom of the page

Chris..S wrote:
bmelloni wrote:
they are deprecating 100% heights...

I think you may have misread or misunderstood something. Do you care to share your source?

Quote is there... the article mentioned earlier in this thread and in my quote of previous poster. Second paragraph.

I wish I had misinterpreted (I realize it says XHTML, not HTML, but XHTML is already slowly taking over). I have been trying to migrate to CSS layouts a very complex table-based layout dependent on 100% height that works in IE but not in standard-compliant mode . Although
CSS layouts are easy for simple layouts like header + footer + multicolumn, it is an absolute nightmare for something that relies heavily on 100% height like a typical business app.

Bertje
Bertje's picture
Offline
Enthusiast
Last seen: 13 years 39 weeks ago
Timezone: GMT+2
Joined: 2004-07-02
Posts: 153
Points: 0

Footer at bottom of the page

@bmelloni

the article says: " The table height property is deprecated in XHTML, ...". So not the 100% height thing all together.

In a previous post you say "... primarily because position:absolute is the only way to make proper layouts without tables ..." I often have the feeling I have to agree with you but usually that is because of my lack of knowledge. When I learn more and more about CSS and see what is build with CSS based layouts these days I just have to disagree.

Most of the time (no not always) the standards are not that bad but the crap implementation in browsers is the problem.

Just my 2 cents.

bmelloni
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

Footer at bottom of the page

Good points bertje.

I do have to admit that the kind of pages that I work on are more like normal Windows or Swing apps than traditional web pages. HTML and CSS get strained by this type of applications.

But on the other hand, "run everywhere with no setup" is why this kind of apps are being built to run on browsers, and the standard needs to grow up to meet the need, by not just having a hoaky workaround but a simple and straightforward mechanism to get the job done.

For example, and to come back to the topic, it would be so nice if after using position:absolute to specify the location of header/footer/sidebar/content (with smart uses of top:0, bottom:0, left:...) you could put an element in the content panel with width/height 100% and having that 100% be the exact size of the panel. Intuitive... but not how things behave - you really get 100% of the "original" window... doh!!!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

fwiw,
- the height property of <table> hasn't been deprecated. It never existed - at least not in any html standard.

- styles apply to <table>, height:100% is a legitimate style and can be applied to any html element.

CSS & HTML continues to evolve. Right now, with a degree of ingenuity you can make just about any table design in CSS without tables. When sufficient browsers properly support CSS2, we will be able to use the various table-* display properties. These bring the benefits of table layout to other elements. I don't think that will mean everyone will race back to table based layouts, but it does free us from some of the contortions we have to force floated divs into.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Footer at bottom of the page

bmelloni wrote:
For example, and to come back to the topic, it would be so nice if after using position:absolute to specify the location of header/footer/sidebar/content (with smart uses of top:0, bottom:0, left:...) you could put an element in the content panel with width/height 100% and having that 100% be the exact size of the panel. Intuitive... but not how things behave - you really get 100% of the "original" window... doh!!!

What you need is to establish a new positioning context - position:relative does that while keeping an element in normal flow.

try...

#container {position: relative; width: 300px; height: 300px; background: red; }
#contents {position: absolute; width: 100%; height: 100%; background: blue}

<div id='container'>
  <div id='contents'>
    contents: you can see this text.
  </div>
  container: you can't see this text.
</div>

bmelloni
Offline
Regular
Last seen: 16 years 10 weeks ago
Joined: 2005-09-20
Posts: 13
Points: 0

Footer at bottom of the page

Chris..S wrote:
What you need is to establish a new positioning context - position:relative does that while keeping an element in normal flow.

I am familiar with position relative... but position:relative does not allow for the type of layouts that I need. Thx anyway.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 17 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Footer at bottom of the page

bmelloni wrote:
Chris..S wrote:
What you need is to establish a new positioning context - position:relative does that while keeping an element in normal flow.

I am familiar with position relative... but position:relative does not allow for the type of layouts that I need. Thx anyway.

This, along with other statements you've made do not point to shortcomings in css, but to your own shortcomings in the grokking of the standards and of just what the web browser is all about.

There are, indeed, many work-arounds and otherwise silly design hacks, but the cause is not due to css failing to step up. The cause is a certain majority browser that by design does not support entire blocks of properties and to a lesser extent with the different levels of support and implementation by other UAs. We have to work around IE's failures—so much so that even coders who know better forget there's another way.

You seem to want the best of both worlds, the total control of the (G)UI offered by application coding and the ability to run within an external framework that has its own (G)UI. Well, the external framework is totally out of your control and just as the UA is not print, the UA is not the application. You can't (well, shouldn't) design for one and expect it to be duplicated in the other. They're different mediums, one runs in the os and the other within an application (UA) window.

In the present case dealing with footers, there are several methods that have been posted on this forum, including variations by Chris and myself. My own version works on all Moz/Gecko browsers and on IE/Win. It fails gracefully in KHTML/Safari/Konqueror and IE/Mac. In the case of Opera, it fails in v6, works in v7, and fails again in v8! It is not a player in Lynx, Dillo, W3M, BrowseX, or any of the assistive technologies. Is that a problem with css, or with the UA? And how will you deal with all those legitimate UAs? That is the challenge of web applications.

You said, ". but position:relative does not allow for the type of layouts that I need. Thx anyway." That is a sure indicator that you don't yet have a handle on css layouts. {position: relative;} does not control how a document is laid out. It is simply a property/value pair that may be applied to an element. It means that element may do or not do various things, eg. it may be a reference container for an AP element or, in IE's case may be required due to buggy behavior.

Whatever you do, don't complain about how the css specs work until you actually know how they work. You will find that there are well thought out and compelling reasons for each rule and behavior. You may differ, but at least know what you're talking about first.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.