How to create a footer that doesn't conflict with other content?

Sample page

On the sample page I have set div#content { padding-bottom:20px; } which works well if 20px is enough to leave the footer beneath the content div. However, if the footer changes size, I'll need to change the amount of padding-bottom aswell. I want a more flexible solution.

Is it possible to fix this without moving the footer outside of the content-div?

Update: found this page that describes a solution to the problem, but the author also states that:

There is only one limitation You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly. If you have a lot of text in your footer then it's also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you开发者_C百科 only have images in your footer than there's nothing to worry about – just set your footer height to a pixel value and away you go.

Which leads me to believe that maybe what I want to achieve is not possible without JavaScript.

---

Because the height of the footer is unknown beforehand, you can't set an explicit height (in px or em) in the CSS. You can, however, get the footer height with javascript and set your content padding-bottom to it. One line in jQuery:

$('#content').css('padding-bottom', $('#footer').outerHeight(true) + 'px');

The jsfiddle: http://jsfiddle.net/blineberry/cFSX4/19/

You'll probably want to set the padding-bottom in your CSS to your best guess of the footer height and let the javascript make the minor adjustments as necessary.

---

Tell me if i got you right check this link out, if not just try to explain in other words whats the problem.

http://jsfiddle.net/2cJsf/19/

*You can use "position: absolute;" but thats your choice, I dont like using its buggy sometimes when the website has lots of divs with positions.

---

Personally, I put my footers on their own outside of the content div, this gives me a more consistent and flexible approach.

My code may look like this

<div id="content">My content here</div>
<div id="foot">Copyright &copy; 2011 mywebsite.com. All rights reserved.<br />my random resize content here</div>

Then with CSS I may do something like this

body {margin-bottom:10px;}
#content {padding:5px;}
#foot {padding:10px;}

Just as an example but obviously style to suit your page and code.

I hope this helps.