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

**adriantr** · 03-10-2008, 10:23 PM

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.

**jim.thornton** · 03-10-2008, 11:04 PM

I'd suggest that you remove the 100% height from the left and right pane. And, don't use position: relative. Also... Take the height completely out of the container.

Do this:

Code:

#container {
   width: 770px;
   margin: 0 auto;
}

#leftpane {
   width: 385px;
   float: left;
   height: 800px;
}

#rightpane {
   width: 385px;
   float: right;
   height: 800px;
}

#footer {
   width: 100%;
   height: 100px;
   clear: both;
}

That should do exactly what you want. I haven't tested it but it should work.

**adriantr** · 03-10-2008, 11:12 PM

Wow thanks for the quick reply I did what you said... but still nothing. Everything else shows up just fine but the footer still doesnt align to the bottom of the page/window (whichever is furthest from the top).

**audiomad** · 03-11-2008, 05:48 AM

set the footer as relative and try adding bottom:0; to your body.

**adriantr** · 03-11-2008, 07:36 PM

Thanks

, unfourtunately it did not work either

. Any other ideas?

**jim.thornton** · 03-11-2008, 10:57 PM

Quote:

Originally Posted by adriantr

Wow thanks for the quick reply I did what you said... but still nothing. Everything else shows up just fine but the footer still doesnt align to the bottom of the page/window (whichever is furthest from the top).

I'm sorry, I mis-understood you. I thought that you wanted the footer contained in the #container but you wanted both columns to go to the same length as each other.

I don't think that you can do what you want without coding. As far as I know this is the best you can do:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/xhtml1-loose.dtd">

<html>
<head>
<style type="text/css">
body {
   background-color: yellow;
}

#container {
   width: 770px;
   margin: 0 auto;
	background-color: white;
}

#leftpane {
   width: 385px;
   float: left;
   height: 800px;
   background-color: blue;
}

#rightpane {
   width: 385px;
   float: right;
   height: 200px;
   background-color: green;
}

#footer {
   width: 100%;
   height: 100px;
   clear: both;
   background-color: orange;
}
</style>
</head>
<body>
   <div id="container">
      <div id="leftpane">
		</div>      
      <div id="rightpane">
		</div>      
   	<div id="footer">   
   	</div>
   </div>
</body>
</html>

Other than that, I think you will be forced to use either PHP or Javascript to determine the screen size (resolution) and then absolutely position the footer. I might be wrong though!

**adriantr** · 03-11-2008, 11:18 PM

Thanks again zincoxide. But I need the footer to only be inside #leftpane as it needs to be the same width as #leftpane.

Here's an image of what I mean.

**jim.thornton** · 03-12-2008, 12:18 AM

Quote:

Originally Posted by adriantr

Thanks again zincoxide. But I need the footer to only be inside #leftpane as it needs to be the same width as #leftpane.

Here's an image of what I mean.

Ahhh... OK.

This works AS LONG AS the right column is at least 100px longer than the left. Maybe you can play with it to get it more to your liking. The 100px is what I set the height of the footer to, so if it is taller or shorter than 100px, make sure to adjust the height of the negative margin.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/xhtml1-loose.dtd">

<html>
<head>
<style type="text/css">
body {
   background-color: yellow;
}

#container {
   width: 770px;
   margin: 0 auto;
	background-color: white;
}

#leftpane {
   position: relative;
   width: 385px;
   float: left;
}

#leftcontent {
   width: 100%;
   height: 400px;
   background-color: blue;
}

#header {
   background-color: red;
   height: 100px;
   width: 100%;
}

#rightpane {
   width: 385px;
   float: right;
   height: 600px;
   background-color: green;
}

#footer {
   width: 100%;
   clear: both;
   bottom: 0px;
}

#footer-content {
   width: 385px;
   background-color: purple;
   height: 100px;
   margin-top: -100px;
   float: left;
}
</style>
</head>
<body>
   <div id="container">
      <div id="leftpane">
      	<div id="header">
      	</div>
      	
      	<div id="leftcontent">
      	</div>
		</div>      
      <div id="rightpane">
		</div>      
      <div id="footer">
         <div id="footer-content"></div>   
   	</div>
   </div>
</body>
</html>

**audiomad** · 03-13-2008, 09:30 AM

Quote:

Originally Posted by adriantr

Thanks

, unfourtunately it did not work either

. Any other ideas?

Just noticed your footer has not been set to float left and set the footers width to the same as the container that should fix it for you.