I have been searching all over the place for hours trying to find a solution to my problem. I have tried several different "solutions" but none have worked/worked as i need.
I need #footer to be at the bottom of #leftpane regardless of page/window height. So if the content is longer than the window you must scroll down to see the footer and if the content is shorter than the window then there is whitespace (which shall be the background of #leftpane) between the end of the content and the footer. The widths need to be whatever is specified, the heights must be flexible except for any divs with specified heights (such asv header etc).
Here's the code:
Any help is greatly appreciated. Thanks in advance,HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0; text-align: center; } #container { width: 770px; height: 800px; /*Here Just to test stretchability, shall be removed in final version*/ background-color:#CCCCCC; text-align: left; margin-left: auto; margin-right: auto; } #leftpane { width: 385px; height: 100%; background-color:#999999; float: left; } #rightpane { width: 385px; height: 100%; background-color:#666666; float: right; } #header { height: 400px; width: 385px; background-color:#FFFFFF; } #logo { width: 185px; height: 100%; float: left; } #navigation { width: 200px; height: 100%; float: right; } #leftcontent { padding: 5px; } #footer { height: 70px; background-color:#CCCCCC; } </style> </head> <body> <div id="container"> <div id="leftpane"> <div id="header"> <div id="logo"> Logo Image Here </div> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Lawyers</a></li> <li><a href="#">Areas of Practice</a></li> <li><a href="#">Current Topics</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <div id="leftcontent"> Etiam blandit orci ac magna. Nullam orci nisl, dictum vel, dignissim a, tincidunt vitae, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris facilisis odio hendrerit dolor. Mauris sed neque. Nulla id justo a est vulputate sagittis. Sed sollicitudin dignissim sem. Duis non nibh aliquam mauris pretium luctus. Nam nec libero. Vestibulum tincidunt metus sit amet odio. Phasellus venenatis porta tellus. Proin at felis ut arcu pretium vestibulum. </div> <div id="footer"> Footer Stuff </div> </div> <div id="rightpane"> <div id="righttop"> Image will go here </div> <div id="rightcontent"> More Content </div> <div id="realad"> Ad here </div> </div> </div> </body> </html>
Adrian
PS. I've tried having position: relative on the parent (#leftpane) and position: absolute; bottom: 0; right: 0 on the #footer. (That seemed to be the most common solution but it didn't work for me). Also, the solution discussed here looked hopeful (because it was different from the previously mentioned one) but did not work for me.
Bookmarks