SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Columns, Footer, at the bottom, always... or not as it seems

    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:

    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>
    Any help is greatly appreciated. Thanks in advance,
    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.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Joe

  3. #3
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip. I used the holy grail when I was doing some of my first CSS layouts. Unfourtunately it does not permit me to have the footer inside another div. But thank you nonetheless!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •