Welcome!

[baritoneuk]

I really enjoyed the recent article on floats- I think I am finally really understanding them.

However I've been pulling my hair out on this one all day and I can't work out how to fix the problem.

I've managed to create a fixed footer where if the content of the page is short the footer will always appear at the bottom of the screen, and if longer than the screen then the footer will appear below the content. I haven't tested it in IE yet, but that's something else I'll have to figure out if it doesn't work.

The main content is surrounded by 4 wrappers. This is partly to wanting a drop shadow on the left and right of the main content. The problem is that the outer two wrappers (outerWrapper and secondWrapper) collapse at the bottom of the screen (I think due to the height:100% that I have used). However if I remove the height:100% the footer no longer appears at the bottom of the shorter page.

An example of the problem is here:
http://newsite.selectperformers.com/fixed-footer-short/
http://newsite.selectperformers.com/fixed-footer-long/

[jarek]

My HTML code:

Code: Select all

<div id="wrapper">
<div id="header">header</div>
<div id="content">
ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />
ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />
ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />
ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />ujjjjjjjjjjj<br />

</div>
<div id="footer">footer</div>
</div>

and CSS:

Code: Select all

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

#wrapper {
height:100%;
height:auto!important;
min-height:100%;
position:relative;
margin: 0 auto; width: 920px; background: #fff url(bg.gif) repeat-y; padding: 20px;
}

#header { height: 200px; }
#content { padding-bottom: 120px; }
#footer { position: absolute; bottom: 0; height: 120px; }