Adding a footer that moves

Get Started
1

Hi,

I’ve started to build my first website based on the book “Building your own website the right way”.

I want to add a footer which moves down with the content of the page.

I’ve added a footer div after the bodycontent div in the html file and given dimensions etc. in the css. Since the its the last div I assumed that it would be placed at the bottom of the page by default.

What do I need to do to get it to move down with page content?

Thanks for your help

2

Are you very familiar with CSS? You can use fixed positioning and define the position from one of the sides of the browser (top, bottom, left, right), in this case, the bottom.

By default the last div will be placed below the rest of your content, however long it is, not necessarily at the bottom of the page.


body {margin:0; padding:0;}
#footer {width:100%; height:100px; background-color:#0033FF; color:#FFFFFF; bottom:0; position:fixed;}



<body>
<div id="header">header</div>
<div id="content">random content</div>
<div id="footer">footer content</div>
</body>

It’s very simplified, but it will “fix” the footer at the bottom of the browser window no matter the size of the browser or the rest of the content. Kind of like the bottom toolbar on Facebook.

Just make sure to take into account that part of your content will be covered by the footer and arrange padding or margins accordingly.

And in case you are interested, getting it to work aligned to the left or right of the browser window is a little different, but in that case you might as well use floats.

3

http://ryanfait.com/sticky-footer/

4

Thanks for the replys

I think I explained myself badly ! I’m not trying to get the footer to stay fixed at the bottom of the browser.

I want it to appear directly below the body content.

huit,

I tried the markup you suggested but the footer dissapears completely.

I think it has something to do with the fact that the other divs (body content, sidebar etc.) are positioned with relative positioning.

If I remove relative positioning from the other divs then everything appears in the order of the xhtml

5

The code I provided was to get a fixed footer. Does it all lay out the way you want it to now?

Rereading your first post your explanation could be taken either way. Since divs are block elements and automatically position themselves one after the other the next logical assumption was a fixed footer.

Yeah, having relative positioning on the other divs does seem to make the footer disappear. Not sure exactly why that happens, but I will say that you don’t need to position elements unless you want to overwrite their default behavior (which I believe is “static”) as in the case of the fixed footer.

6

Hi

Yeh, I re-read my post and it was ambiguous to say the least !

Haven’t managed to sort things out yet. Currently looking through the resources section of the site.

Unfortunately I can’t use static positioning since I want to have a sidebar next to the bodycontent.

Thanks

7

A sidebar? In that case you can use floats instead of positioning. If you aren’t familiar with how floats work I would recommend reading up on them first. (Just don’t revert to using tables. x_x)

This site is a pretty good introduction to floats:
http://css.maxdesign.com.au/floatutorial/index.htm

There are many more good sites that go into more detail on applications of floats, how to clear floats, etc., but I think you can get your sidebar to work without too much hassle.

If you are still stuck you can always post your source code along with your question. Sometimes it helps to have the problem code to hack at when general examples just don’t cut it.

8

Thanks. I’ll have a look at that link and see if I can get it sussed.

9

google “css holy grail”… that’ll get you a TON of results doing exactly what you’re wanting.

OR you can visit this site and choose from the templates they have already set up.

10

Thanks for the help guys - Got it working, took a while but huit’s link sorted me out !

11

I’ve used Matthew’s layouts in several designs and they are excellent, but be aware that there are some minor glitches in them, particularly the way they do links (don’t depend on his link codes, write your own) and in the way his IE-only CSS handles the layout in IE6. But these are minor caveats, they are terrific layouts.