CSS Pissing Me Off!

Kassem · April 24 2010

Hey guys, does anyone know any way of sticking a footer to the bottom of the screen in case the content of the page is larger than the browser's size?

what I did is the following:

<html>
  <body>
    <div id="content">
      <p> whatever </p>

      <div id="space"> </div>
    </div>

    <div id="footer"> 
        <p> footer content </p>
    </div>
  </body>
</html>

in the css file:

#content {
    min-height: 100%;
    height:auto;
    height:100%; (for IE6)
    margin-bottom: 50px;
}

#space {
    height: 50px;
    clear: both;
}

#footer {
    height:50px;
}

That's the method I'm using to do it... But it doesn't work. Any suggestions?

Last edited by Kassem (April 24 2010)

rolf · April 24 2010

You mean facebook-style?
I think you need to use absolute positioning (from the bottom) and z-index to make it appear over other windows.
I dont garantee anything, there might be javascript involved.

Kassem · April 24 2010

well no not exactly facebook style... I just want a footer that sticks at the bottom of the page and contains the copyrights and this kinda stuff...

Actually yeah I was wondering if I might need javascript. There has to be some work-around. This is an assignment for my web development class, we haven't taken JS yet but I think I can use it. I'll try to find a pure CSS solution first though

rolf · April 24 2010

I think you should try wrapping it all in a div with position=relative, then position the footer using absolute positioning from the bottom. I'll try that and come back to you.

rolf · April 24 2010

Yep. It seems to work.
What i did is create first a wrapper div.
Then that div is position:relative.
Then the footer is position:absolute and bottom:0px so that it sticks to the bottom
The wrapper with position:relative was necessary because a div with position:absolute will position itself in relation to the nearest parent with position not set to static, that is why you need to create a wrapper and set it to position:relative
For some reason now the footer is less then 100% of width, so defined the width explicitely.
Note there might be a better/simpler way to do this, but knowing how css is (we all agree on this one :)) when it works, I prefer not to touch it :)
But if you want to experiment with another way, feel free. I think the key here is position:absolute and bottom:0px for the footer.
BTW i gave a border to different divs so that their boundaries will be visible.

<html>
	<head>
	<style>
		#wrapper {
			position:relative;
			border:1px solid red;
		    min-height: 100%;
		    height:auto;
		    height:100%; (for IE6)
		}
		#content {
		    margin-bottom: 50px;
			border:1px solid blue;
		}

		#space {
		    height: 50px;
		    clear: both;
		}

		#footer {
			position:absolute;
			width:100%;
			bottom:0px;
		    height:50px;
			border:1px solid green;
		}
	</style>
	</head>
  <body>
	<div id="wrapper">
	    <div id="content">
	      <p> whatever </p>
	      <div id="space"> </div>
	    </div>

	    <div id="footer"> 
	        <p> footer content </p>
	    </div>
	</div>
  </body>
</html>

Last edited by rolf (April 24 2010)

Kassem · April 24 2010

That is exactly how my HTML is, and the CSS as well. The problem is when the size of the content exceeds the height of the browser. The footer appears on the bottom of the screen, but on top of it there's some parts of the content. By the way, I'm using absolute divs to layout my content within the <div id="content"> could that be the problem?

rolf · April 24 2010

The content is becoming bigger the the wrapper, but the wrapper is staying at 100% of height.
Do the footer and header height need to be defined in pixels?

BTW I just discovered, facebook style footer DIV is very easy, all you need to do is
position:fixed; bottom:0px;
and it will stick to the bottom of the window even when you scroll

Last edited by rolf (April 24 2010)

Kassem · April 24 2010

I tried doing it in percentage but that didn't do the trick either... That's one of the reasons why I prefer flash lol

pikatore · April 24 2010

Kassem, for the position parameter, use 'fixed'.

So the footer should have the css like this instead:

{ position:fixed; bottom:2%; right:2%; }

Play with the measurements, but that should do the trick.

Also, pull the footer div out of the other divs, as it isn't related to them.

Warning, however... the value 'fixed' isn't supported in IE6, so you'll have to find a workaround for it (just google for it, there are a few).

CSS has a few parameters you have to keep an eye on the IE browsers. They only are a few parameters, but not double checking compatibility could be disastrous for older IE users.

I'm assuming you want a footer anchored facebook style to the bottom of the page. If not, please correct me.

Last edited by pikatore (April 24 2010)

Kassem · April 24 2010

hmmm no that's not what I'm looking for actually. I just want a simple footer like in most websites. And that is the footer that comes last on the page and contains the copyrights and legal stuff and probably some links and stuff like that...

rolf · April 24 2010

<html>
	<head>
	<style>
		body {
			margin:0;
			padding:0;
		}
		#wrapper {
			position:relative;
			border:1px solid red;
		}
		#space {
		
		}
		#content {
			height:100%;
			width:100%;
			border:1px solid blue;
		}
		#footer {
			width:100%;
			position:absolute;
			bottom:0px;
		    height:50px;
			border:1px solid gray;
		}
	</style>
	</head>
  <body>
  	<div id="wrapper">
		<div id="content">
		  <p> whatever </p>
		</div>
		<div id="space"></div>
		<div id="footer"> 
		    <p> footer content </p>
		</div>
    </div>
  </body>
</html>

I think I nailed it :)
Dont ask me how! lol
You owe me one :)

Edit: almost there: see post below.

Last edited by rolf (April 24 2010)

rolf · April 24 2010

Ah wait that very weird, if you increase #space or add multiline text after #space and before footer, the footer goes down as we want, but if you add the text in #content, it doesnt.
Sorry i didnt test properly but i think we're almost there, I gtg though.

rolf · April 24 2010

To hell with CSS. It took me 5 minutes with tables. Tell your teacher not to use CSS for layout, only for styling, and let the CSS supporters get lost. (Where are they when such a problem arises, BTW?). They're probably just posers.

I have better to do in my life.

<html>
	<head>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#content {
			border:1px solid blue;
			/* uncomment the following to test content expansion */
			/* height:1200px; */
		}
		#footer {
			border:1px solid gray;
			height:50px;
		}
	</style>
	</head>
  <body>
	<table height="100%" width="100%" cellpadding="0" margin="0">
		<tr>
			<td id="content" valign="top">Content
			</td>
		</tr>
		<tr>
			<td id="footer" valign="top">Footer Content</td>
		</tr>
	</table>
  </body>
</html>

Kassem · April 24 2010

Actually my teachers knows nothing. She didn't even know that we could use the id as a CSS selector simply because it is not included in her crappy outdated book! The things I've done in the assignment are way ahead what she actually knows. She always has to check with me in class before she says anything lol.

Honestly, I'm not a big fan of table layouts, that's why I'm trying to do it using divs and css. But oh well, I've always disliked HTML/CSS for its hackish nature. You always need to use some sort of a hack or a work-around to get things to work. Hopefully that's gone now with CSS3 and HTML5.

xterm · April 24 2010

http://ryanfait.com/resources/footer-st … m-of-page/

http://matthewjamestaylor.com/blog/keep … f-the-page

Is this the solution to your problem ?

Kassem · April 24 2010

I've already checked these out and for some reason they did not work... and then it pissed me off so I opened this thread :)

I'll try to experiment with it tomorrow, but for now I'll just send the assignment before the deadline.

Thanks for the help guys!

proners · April 24 2010

by the way man you should include a valid dtd above your html
or ie will render the page in quircks mode which is like pre-historic ie rendering...
stick with xhtml dtd, it gives you the best compatiblity across all browsers, i haven't read thoroughly or tried any of the code above, maybe that's why the snippets you are trying are not working well

Last edited by proners (April 24 2010)

Joe · April 25 2010

@rolf: Did you suggest tables for positioning? You know you're gonna piss off purists.

Kassem, I'll look into your problem tomorrow, it's way too late now.

rolf · April 25 2010

rahmu wrote:

@rolf: Did you suggest tables for positioning? You know you're gonna piss off purists.

Well, then, let them offer another solution.

Kassem · April 25 2010

Ok I submitted my assignment earlier today, but now I still want to know how to this trick. I might have to search for a website which does it and check the source code and the CSS.

About what rolf and rahmu said above, what do you guys usually use to position stuff on your page? Is it tables or divs and CSS? What's recommended by the W3C? And lastly, in your own experience which method would you suggest?

Joe · April 25 2010

Tables are obviously much more easier to use for positioning. However they are not meant to use this way.

The pure "clean" way to do this is to use CSS positioning (relative/absolute, float, clear, ...). This is the way recommended w3c way.

The problem with tables apart from the non-compliance to standards, is that tables are heavy and load slowly.

Personally I try to stay away from them as much as possible, mainly for pedagogical reasons. I have this idea that as a programmer, I am more interested in how my code looks, rather than my program (website) looks. I wrote about it in my most recent blog post.

About your problem, I tried to apply a overflow:auto attribute to your content, with fixed positions to your header and footer. It works but isn't compatible with different displays ... so back to square one.

I am not sure about the "cleanness" of using an empty div that takes 50px too...

pikatore · April 25 2010

Kassem wrote:

She didn't even know that we could use the id as a CSS selector simply because it is not included in her crappy outdated book!

Wait what? How is she qualified to be teaching shit like that?!

Rolf, I'm no CSS purist, but I highly advise against thinking that tables are some sort of quick fix. That kind of thinking will introduce you to a world of pain as things get more complex.

And I had a quick go in my 3 minute break...

<html>
    <head>
    <style>
#content {
    height: 100%;
   background: #FFF;

  
}

#footer {
    height:100px;
background: #FFF;
position: absolute;
bottom:0px;
z-index: 1000;
width:100%;
}
    </style>
    </head>
  <body>
 <html>
  <body>
    <div id="content">
      <p> whatever </p>

    
    </div>

    <div id="footer"> 
        <p> footer content </p>
    </div>
  </body>
</html>
  </body>
</html>

Last edited by pikatore (April 25 2010)

Kassem · April 25 2010

pikatore wrote:

Wait what? How is she qualified to be teaching shit like that?!

She's actually the head of the Informatics department at my faculty lol. I swear am not exaggerating but her knowledge about web development does not go beyond what she's read in her Deitel & Deitel book. I do not know if that's how web development is being taught in other universities but she basically does the following: She tells us about the available tags and attributes and then she tries them in front of us which in most cases doesn't work and so I have to interfere and give her the right fix. And then in CSS all she did was that she gave us the very basic selectors (excluding id selectors) and the properties that could be used (not all of them of course). After the partial exams she's supposed to start with JavaScript and then give us a brief introduction to PHP. But the thing is that it is obvious that she's never done a website in her whole life, she knows nothing about web design and what are the current trends and all this stuff. Anyone can learn the CSS properties but I strongly doubt that any of my classmates can do a simple gradient color background. Plus none of them knows how a website is laid out, where things are supposed to be placed in order to make it user-friendly and usable.

P.S: Dr. Moustapha Serji who is IMO the best instructor at the faculty when it comes to informatics courses said that she's better than him and all the other instructors when we complained to him about Dr. Lina. I don't know, maybe she's good at something else, but definitely not at web development which she shouldn't be teaching.

Last edited by Kassem (April 25 2010)

pikatore · April 25 2010

Dr. Moustapha Serji who is IMO the best instructor at the faculty when it comes to informatics courses said that she's better than him and all the other instructors when we complained to him about Dr. Lina.

Well THAT'S reassuring lol!

How did you do with my code snippet?

rolf · April 25 2010

Kassem wrote:

Ok I submitted my assignment earlier today, but now I still want to know how to this trick. I might have to search for a website which does it and check the source code and the CSS.

Arent they giving you a correction? If your teacher came up with this problem, then there might very well be no solution to it using CSS.

pikatore wrote:

Rolf, I'm no CSS purist, but I highly advise against thinking that tables are some sort of quick fix. That kind of thinking will introduce you to a world of pain as things get more complex.

With the other solution being to turn my stylesheet into a giant riddle by using CSS hacks? In the case above I think there is nothing wrong with a 3 row table (of course, tested across browsers).
I know tables can get messy, but not in such a simple situation. For the rest of the layout, absolute positioning is the way to go.

Kassem wrote:

About what rolf and rahmu said above, what do you guys usually use to position stuff on your page? Is it tables or divs and CSS? What's recommended by the W3C? And lastly, in your own experience which method would you suggest?

I often have a box of contents to center on the page (for example, a login box or a fixed-width, fixed-height website). I use a full width, full height table to center that on the middle of the browser page, then use absolute CSS positioning to do the rest.

here is an example:
http://kitabat-lb.org

and here is an earlier website where I used tables for layout:
http://gametheorylebanon.com

As you can see, it works well, but it was only possible thanks to careful design, and I had to re-write the table halfway as it was getting unmanageable. If I had to do it again, I'd use DIVs with absolute positioning.

PS: Kassem, maybe me or some others here should apply to this university, as teachers :)

Last edited by rolf (April 25 2010)

LebGeeks

#1 April 24 2010

CSS Pissing Me Off!

#2 April 24 2010

Re: CSS Pissing Me Off!

#3 April 24 2010

Re: CSS Pissing Me Off!

#4 April 24 2010

Re: CSS Pissing Me Off!

#5 April 24 2010

Re: CSS Pissing Me Off!

#6 April 24 2010

Re: CSS Pissing Me Off!

#7 April 24 2010

Re: CSS Pissing Me Off!

#8 April 24 2010

Re: CSS Pissing Me Off!

#9 April 24 2010

Re: CSS Pissing Me Off!

#10 April 24 2010

Re: CSS Pissing Me Off!

#11 April 24 2010

Re: CSS Pissing Me Off!

#12 April 24 2010

Re: CSS Pissing Me Off!

#13 April 24 2010

Re: CSS Pissing Me Off!

#14 April 24 2010

Re: CSS Pissing Me Off!

#15 April 24 2010

Re: CSS Pissing Me Off!

#16 April 24 2010

Re: CSS Pissing Me Off!

#17 April 24 2010

Re: CSS Pissing Me Off!

#18 April 25 2010

Re: CSS Pissing Me Off!

#19 April 25 2010

Re: CSS Pissing Me Off!

#20 April 25 2010

Re: CSS Pissing Me Off!

#21 April 25 2010

Re: CSS Pissing Me Off!

#22 April 25 2010

Re: CSS Pissing Me Off!

#23 April 25 2010

Re: CSS Pissing Me Off!

#24 April 25 2010

Re: CSS Pissing Me Off!

#25 April 25 2010

Re: CSS Pissing Me Off!

Board footer