Footer needs moving, side image CSS

wood1e
wood1e used Ask the Experts™
on
Hi,
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

http://www.trytest.net/david/website/special.html

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? :)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
Commented:
#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

Author

Commented:
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