20 replies [Last post]
ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

I've done a good deal of reasearch, and after hearing a great deal about box hacks and inline divs, I still don't know how to do two things....

{ this is the thorn in my side that has kept me up late for three days }

I, like so many other seekers of wisdom, have decided it is time to lose the tables and step up in the world.

I, at this point, am fully prepared to recant my recent conversion and return to my old ways.

Problem #1, how to make the footer stay below the main body of text, but at the bottom of the page. ( I've tried a separate div, nested div, span, . . )

Problem #2, how to make the long grey side there go all the way down the page, its fine untill the main body of text becomes longer than the viewport.

Is it my ignorance ? Can anybody point me in the right direction ?
Or is this layout impossible to create in CSS ?

( please note that the dashed borders and colors are only there for demonstration purposes, outlining the individual divs to make it easier to visualise )

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

safull
safull's picture
Offline
Regular
Madrid -Spain
Last seen: 15 years 47 weeks ago
Madrid -Spain
Timezone: GMT+1
Joined: 2003-08-27
Posts: 17
Points: 0

0px at Bottom

for the footer have you tried to set absolute position and put 0px at bottom? I asumme your using blocks for each div.

i hope it works

ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

how to keep footer at the bottom of the page ..

I have, and for some reason it will not stay put. Thanks anyway.

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

keely
Offline
newbie
Canada
Last seen: 15 years 45 weeks ago
Canada
Timezone: GMT-7
Joined: 2003-09-11
Posts: 2
Points: 0

how to keep footer at the bottom of the page ..

I've got exactly the same problem - compare how it works on my home page and then doesn't on a page where the content is shorter, i.e. here. I got really excited when I read this article on Sitepoint.com which recommended adding containers for the left, right and centre column contents and a javascript that resizes the left and right columns and then shows the footer at the bottom - but it still doesn't work.

ShethemjaJära, maybe give this a shot and see if it helps you.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

how to keep footer at the bottom of the page ..

Hi ShethemjaJära,
Adding a footer in CSS has always been a bit of a headache and when you want the columns to be the same length that migraine time.
Luckily for me I don't suffer from migraines although I've got the flu now and may be waffling due to the medication.

There are a few different methods around for adding a footer to the page.
One way is to have the footer float after the columns with clear:both set before it.
Then to get the columns to be of the same length if you know the center one will be longest you can give the appearance of same length columns by putting the three columns in a div with a background color set, leave the two outside columns as transparent backgrounds and give the center column a different background color.
I have attached a basic example.

keely, I'm not sure why the javascript is not working on some pages, it looks like the heights are not getting read correctly, check the ids of the columns see if adding more content to another column makes any difference.

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 8 years 6 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

how to keep footer at the bottom of the page ..

Hi Keely,

You have made one simple error that is stopping the page from working:

<div id=leftcontent">

You've missed out the starting quotation mark which meant the column wasn't getting recognised in the javascript so the display was incorrect.

Just add the starting quotes and everything will work as expected.

<div id="leftcontent">

Paul

keely
Offline
newbie
Canada
Last seen: 15 years 45 weeks ago
Canada
Timezone: GMT-7
Joined: 2003-09-11
Posts: 2
Points: 0

how to keep footer at the bottom of the page ..

Okay, Tony and Pob, you guys are studs. Magificent, everything works now! Double your salary! Laughing out loud I could sure benefit from the ability to proofread my code, of course....

ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

how to keep footer at the bottom of the page ..

I've tried the 3colfooter example, it may just be my limited skills but I couldn't get it to do what I wanted. Perhaps if I posted my code somebody could tell me what I could do to fix it.

	<body>
		<div class="header">
				<div align="center">Header</div>
		</div>
		<div class="side">
			<a href="x.html">Linkses</a><br />
			 <a href="x.html">Another Link</a><br />
			 <a href="x.html">Hyperlink</a><br />
			 <a href="x.html">Goto Link</a><br />
			 <a href="x.html">A Link<br />
			 Not a Link<br />
			 Yeah, it was a Link</a></div>
		<div class="bodyoftext">
			<div class="notebox" align="center">
				<div align="center">
				  <p>a notebox that is to remain nested to the left of the main body of
					  text.</p>
			  </div>
		  </div>
			&nbsp;Main Body of Text
			<div class="footer">
			  <p>
				Footer</p>
			</div>
		</div>
	</body>

body {
	background-color: #FFFFFF;
}
.bodyoftext {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	width: 59%;
	position: absolute;
	left: 31%;
	top: 25%;
	border: 1px dashed #333333;
	bottom: 1px;
	height: 75%;
}
.bott {
	width: 80%;
}
.footer {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #000000;
	background-color: #999999;
	text-align: center;
	border: 1px dashed #333333;
	height: 50px;
	bottom: 0%;
}
.header {
	background-color: #CCCCCC;
	height: 20%;
	width: 80%;
	position: absolute;
	bottom: 80%;
	right: 10%;
	border: 1px dashed #333333;
	left: 10%;

}
.notebox {
	background-color: #999999;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	width: 18%;
	border: 1px dashed #333333;
	float: right;
	margin-bottom: 10px;
	margin-left: 10px;
}
.side {
	background-color: #CCCCCC;
	width: 20%;
	position: absolute;
	left: 10%;
	top: 20%;
	border: 1px dashed #333333;
	bottom: 0%;
	height: 80%;
}

Thank you for all the suggestions so far, I'm glad Keely found what he was looking for. Smile

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

how to keep footer at the bottom of the page ..

Hi ShethemjaJära,
Here's something you could try:

<div id="page"> 
<div id="header"> ...</div> 
<div id="left">...</div><div id="right">main content</div> 
<div id ="footer">...</div> 
</div>

Everything is contained within the page div, if you give it a background color, leave left transparent and set right to white you will get two columns that appear to be the same length followed by a footer. Nothing needs absolute positioning
#page{background-color:#CCCCCC; width:80%;} 
#header{width:100%; height:20%;} 
#left{width:20%; float:left;} 
#right{width:80%; float:left; background-color:#FFFFFF;} 
#footer{width:100%; height:50px;}

Hope that helps.

ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

how to keep footer at the bottom of the page ..

Thanks Tony, I'm sorry for not replying sooner but to be honest I went to bed and woke up the next morning having entirely forgotten I'd posted this here. Laughing out loud

Works like a Charm. Much gratitude.

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

inababes
inababes's picture
Offline
Regular
Last seen: 15 years 51 weeks ago
Joined: 2003-08-02
Posts: 17
Points: 0

how to keep footer at the bottom of the page ..

oh my. i was about to PM you, ShethemjaJära, and send you to this site for help, but it appears you've already found it. :mrgreen:

so, problem solved, or are you still going back to tables? :twisted:

ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

how to keep footer at the bottom of the page ..

Hi Inababes !

I could no longer resist the utter simplicity of tables.

I'm chalking my CSS experience up to an experiment gone awry. Wink jk

Actually, I've learned so much from trying this experiment I will be using css much more heavily. But I'm still not swearing off tables, they may not have been created for design purposes but they fit the bill nicely, why fix what ain't broke so to speak ?

I think the best solution is a sythesis of the two. Divs and spans are great, but there is no reason to abandon tables just yet. I'll wait and see for css3 before I'll reconsider that position.

While what I ended up with did work, it didn't do what I wanted, so . . .

{ a shamefull regression } . . graphics and colors aren't what it's going to look like, I just dressed it up real quick to make it look pretty before I showed my Mum or she might think I was wasting my time. Laughing out loud

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

moody
moody's picture
Offline
Regular
croatia
Last seen: 11 years 37 weeks ago
croatia
Timezone: GMT+1
Joined: 2003-09-21
Posts: 29
Points: 0

how to keep footer at the bottom of the page ..

hi. i've been reading and i just had to join, so i could post to this thread.

i hope you don't mind.

so, you've got another issue with your table, me thinks, and it doesn't come across as cross browser compatable.

i was playing with your project a little and came up with this: URL no longer available

i thought all was going well, when i started having to hack to support the cross browserness. that's when i stopped.

did anyone else come across this, or just me?

cheers! :-({|=

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

how to keep footer at the bottom of the page ..

Hi Moody,
Thanks for your input.
Which browsers are causing issues and what are the issues.
I have limited browsers here at work to check with. :?

ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

how to keep footer at the bottom of the page ..

Hello Moody.

Nice work Smile I've only tested my work in IE and netscape so far, ( ie is 96% of my visitors so I didn't bother much otherwheres ) so I did minimal checking for everything else.

I believe this layouts main problem is with support for min-height, which would fix everything wrong that I can see, but won't work in some browsers.

If there were a way to get past that, this would be an impressive css layout. But as far as I can tell, there isn't.

Did you change the colors ? Something looks better. Stupid lcd monitor, I can't tell.

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

adventurex
adventurex's picture
Offline
newbie
Last seen: 15 years 43 weeks ago
Joined: 2003-09-24
Posts: 10
Points: 0

how to keep footer at the bottom of the page ..

hi,

my apologies for jumping in with my limited knowledge.

just wanted to add that the browser which goes haywire are netscape/mozilla/firebired, atleast on my m/c they rendered left menu not exactly the way it is shown in IE.

if needed, lemme know, i'll upload their screenshots.

thx,

adventureX

ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

how to keep footer at the bottom of the page ..

What goes wrong with the navigation box ?

I think I may have found a trick that will fix the min-height difficulty, that with Moody's work may have this wrapped up, at least for IE.

http://archivist.incutio.com/viewlist/css-discuss/29073

I can't believe I'm still at this. 8O

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

adventurex
adventurex's picture
Offline
newbie
Last seen: 15 years 43 weeks ago
Joined: 2003-09-24
Posts: 10
Points: 0

how to keep footer at the bottom of the page ..

Hi Shethemja,

regarding the useage of CSS over Table, below is an interesting article [sort-of]: http://www.mezzoblue.com/archives/2003/09/24/the_real_wor/

adventureX

ShethemjaJära
Offline
Regular
Canada
Last seen: 16 years 4 days ago
Canada
Joined: 2003-07-22
Posts: 15
Points: 0

how to keep footer at the bottom of the page ..

Thanks.

I feel much better about myself now. Laughing out loud

As to " I think therefore I am ", well, I do not think, therefore I cannot be held responsible because I oblivously don't exist now do I ?

phoat
Offline
newbie
Last seen: 15 years 40 weeks ago
Joined: 2003-10-12
Posts: 1
Points: 0

Same prob

To create a column that seems to resize all the way down to the bottom of the browser you could create a one pixel high graphic, the same width as your column and use it as a repeating background (repeat-y) for the body element. That way, it doesn't matter what height your column is because it will always seem to stretch all the way to the bottom of the browser.

Unfortunately, the footer is a little more difficult to get right.

Hope this helps.

Phoat

cootem
Offline
newbie
boston, ma usa
Last seen: 15 years 40 weeks ago
boston, ma usa
Timezone: GMT+5
Joined: 2003-10-16
Posts: 1
Points: 0

keeping the footer at the foot

I hope you don't mind me jumping in, but I stumbled on this thread while trying to solve a problem with keeping the footer at the bottom without overrunning my other text as the window size changed. Here is what I came up with:

html, body, div.contents {
min-height: 100%;
height: 100%;
}
html>body, html>body div.contents {
height: auto;
}
body {
}
div.contents {
position: absolute;
top: 0;
left: 0;
}
div.footer {
position: absolute;
bottom: 0;
}
div.main {
margin-bottom: 3em;
}
----------------------
<body>
<div class="contents">
<div class="main">main stuff</div>
<div class="footer">footer stuff</div>
</div>
</body>
-------------------
the first two css blocks were the key to getting it to work in Netscape 5+. I should give credit to http://scott.sauyet.name/CSS/Demo/FooterDemo1.html
for those.