footer in multi-columnar CSS

Old Pedant

03-09-2009, 06:30 AM

I have tried to simplify this HTML page down to a reasonable level that will still illustrate my problem.

I have purposely given the various <DIV>s colored borders and interiors to make them easy to find and see. In the actual page, none would have any borders or background colors.

The HTML shown here displays the same--except for the obvious font size differences, etc.--in MSIE and FF. It works adequately.

The only "TRICK" is in the placement of the footer. Note that it is *INSIDE* the <div id="Content"> where the Content is the right column of the page. By using "left: -250px;" this effectively moves the full-width footer to the left side of the page, as desired, while making sure it's at the bottom of everything.

*** BUT ***

But on SOME pages, where I want to use the same CSS, the Navigation DIV is larger (taller) than the Content DIV. And then, not surprisingly, the footer covers over part of the Navigation DIV. It's clearly no longer a real footer.

It wouldn't be a big deal to adjust accordingly--put the footer into the Navigation DIV with a left of 0px--except that I can NOT predict when this situation will happen! (The Navigation height is consistent, but the Content height will vary widely.)

So...the question is simple: What is the right way to use CSS to force that footer to the bottom under all circumstances???

(You can either drop all but one line of the content or add stuff to the nav to see what I'm talking about if it's not obvious.)

Yes, I tried several combinations of "position: relative;" in place of all the "position: absolute;" specs. None helped. Some (not surprisingly) made it worse (that is, would put the content below the nav, etc.).

Will be happy to add any enclosure divs or whatever to make this come out right.

Thanks for looking.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style>
div#Head { position: absolute; top: 0px; left: 0px; width: 800px; height: 110px;
border: solid blue 2px; background-color: lightblue; }
div#Main { position: absolute; top: 110px; left: 0px; width: 800px;
border: solid red 2px; background-color: pink; }
div#Navigation { position: absolute; top: 0px; left: 0px; width: 200px; vertical-align: top;
border: solid green 2px; background-color: lightgreen; }
div#Content { position: absolute; top: 0px; left: 250px; width: 550px; vertical-align: top;
border: solid orange 2px; background-color: yellow; }

div#foot { position: relative; bottom: 0px; left: -250px; width: 800px;
border: solid black 2px; background-color: lightgrey; }
</style>
</head>
<body>
<div id="Head"><br>This goes in the head</div>
<div id="Main">
<div id="Navigation">
<ul>
<li>Various</li>
<li>Nav</li>
<li>Links</li>
<li>Go</li>
<li>Here</li>
</ul>
</div>
<div id="Content">
Lots of content lines here with this one especially long line to see what happens...word wrap at right place or not?<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
Lots of content lines here<br><br>
** END OF CONTENT **
<div id="foot">footer goes here</div>
</div>
</div>
</body>
</html>

As a side note, why does MSIE make the width of the Content div 800 pixels when it's clearly specified as 550px?? Mind you, it makes the width of the text content therein only 550px, and since I won't be using border or backgroud, it's quite usable for me, as is. But it's sure weird.

p.s.: Please, please, save me from using a <TABLE> instead of <DIV>s. <grin/>

Old Pedant

03-09-2009, 06:39 AM

It would figure that right after I post I see another message with same theme.

So I looked at
http://nopeople.com/CSS/full-height-3column/index.html

And it doesn't seem to help.

Here is a clone of the HTML/CSS on that page, excepting with very little text in the center column and a greatly expanded left-side column.

And, as you can see, the footer is in entirely the wrong place *IN FIREFOX*. (Seems to be okay in MSIE 6).

Here's hoping Excavator will set us all straight on this one!

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="" content="authored by http://www.nopeople.com/Design/" />
<meta name="" content="Sticky Footer by Ryan Fait - http://ryanfait.com/" />
<title>Full height 3-column with header and footer</title>
<style type="text/css">
html, body{
height: 100%;
text-align: center;
font: 14px "Comic Sans MS";
}
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1000px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
text-align: left;
background: url(column_back.gif) repeat-y;
}
#header {
width: 1000px;
height: 150px;
background: #666666;
}
#lcol {
width: 200px;
float: left;
padding: 5px 0 0 0;
}
#content {
margin: 0 200px 0 200px;
padding: 5px 0 0 0;
}
#rcol {
width: 200px;
float: right;
padding: 5px 0 0 0;
}
#footer, #push {
width: 1000px;
height: 50px;
margin: 0 auto;
background: #00FF00;
}
#push {background:none;}
p {
margin: 5px;
}
.statement {
font-family: "Comic Sans MS";
font-size: 1.2em;
color: #666666;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="lcol">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

</div>
<div id="rcol">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div id="content">
<p class="statement">This is full of text to show that it does not break. Take the
text out and it's a full height 3-column layout with a header and
footer.
To use this on your own site all you would really need is a different
background image to make your columns.
</p>
<div id="push">

</div>
</div>
</div>
<div id="footer"><p>some footer text here</p></div>
</body>
</html>

Excavator

03-09-2009, 09:51 AM

Here is a clone of the HTML/CSS on that page, excepting with very little text in the center column and a greatly expanded left-side column.

And, as you can see, the footer is in entirely the wrong place *IN FIREFOX*. (Seems to be okay in MSIE 6).

Here's hoping Excavator will set us all straight on this one!

Hello Old Pedant,
That's an interesting goof. Sorry about that :o When I tested it I never made a side column the long one.
I should not have put #push in #content. It needs to be moved to #wrap so any of the 3 columns can push on it. Add clear:both; to it, to deal with the floats, and it works.

I've updated the demo site with these changes.Here's the link again - http://nopeople.com/CSS/full-height-3column/index.html

and the demo that was based on is at -http://nopeople.com/CSS/full-height-layout/index.html

Old Pedant

03-09-2009, 11:23 PM

Perfect.

I had actually tried moving PUSH, but I didn't add the "clear: both;".

Thanks, again.