...

View Full Version : footer



1234m
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>

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

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

gnomeontherun
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;
}
</style>

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.

1234m
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?

gnomeontherun
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.

1234m
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

gnomeontherun
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.

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum