View Full Version : footer

11-23-2008, 11:01 PM
I was wondering how i would write the css code that that if i have a code:|

example code:

<div id="content">
<p>text text text</p>

<div id="footer">
<p>footer text</p>
<img src="image">

how would i make the footer move down the page if i put more content in the id="content?

with the css can i use position:... or padding:...?

thanks in advanced

11-23-2008, 11:15 PM
CSS Margin will give the <div> more spacing between the footer and content like so

<style type="text/css">
#footer {
margin-top: 50px;

You can put any value in there, and it will give the footer <div> that much margin on the top. This goes between the <head></head> tags.

11-23-2008, 11:18 PM
and that way when i add more content it wont over lap the footer? it will just move the footer down?

11-23-2008, 11:27 PM
Well <div> elements are block elements, meaning that by default (without any extra CSS that changes the default settings) they will automatically fill horizontally the whole space they can in the container (the window or another HTML element) and the next element will automatically start on the next line. So even without my CSS, the footer will always be displayed below the content, its just that my code makes the footer move an extra 50px down from the content.

11-23-2008, 11:50 PM
Oh really, i didnt know that, thank you

the reason i was asking was because my footer on my old site wouldnt move the text in my content would just over lap it, could that be because i was using the position: in css, i heard that i shouldnt be using position: i should use padding and margin instead to position my sutff

11-24-2008, 12:06 AM
Well there are multiple methods of displaying with CSS, but if you position absolutely, then things will overlap if you aren't careful.

Here is a good resource about CSS positioning that can clear it up.


11-24-2008, 12:23 AM
o ok thank you very much for all your help