Footer needs moving, side image CSS

wood1e used Ask the Experts™
I have just about finshed a site I am working on.  When I realised that if I use actual height for my #middle div ie 475px, the footer is then too high and sits under some content text (in IE and FF).. See here

But if I change the height to 100px, the problem is solved.  I then check the webpage in FF and low and behold the side.jpg has disappeared...

I must be missing something, could anyone give me an idea? :)
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
#middle isn't tall enough so its content is overflowing its bottom edge.  The solution is to use min-height instead of height.
#middle {
	background-image: url(images/side.jpg);
	background-repeat: repeat-x;
	margin: 0 auto;
	min-height: 475px;
	width: 100%;
#middle_text {
	background-color: #FFF;
	float: left;
	height: 100%;
	padding: 10px 15px 0;
	width: 833px;

Open in new window


Brilliant, many thanks for that... :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial