I'm working on modifying a WordPress theme to have a fluid width and I've got it working except for one thing - the footer wants to tuck itself underneath the last elements on the sidebar on the left. What I want is to display the footer on the sidebar but at the very bottom.

The elements look like this:

<div id="main">
  <div id="content"
      style="position:absolute; left:260px; width:auto; margin: 0 15px 0 0">
  </div>
  <div id="sidebar">...</div>
<div>
<div id="footer"></div>

Styles:

body
{
  font-size: 100.01%;
  font-family: Verdana, Arial, sans-serif;
  padding: 0;
  margin: 0;
  backgroun: #fff url(images/bg.png) repeat-y top left;
}
#main
{
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#content
{
  padding: 0;
  text-align: left;
  color: #242424;
  background-color: #fff;
  font-size: 0.8em;
}
#sidebar
{
  width: 240px;
  margin: 0;
  padding: 0;
  color: #f3f3f3;
  font-size: 0.9em;
  font-family: Arial, Helvetica, sans-serif;
}
#footer
{
  padding: 20px 0;
  margin: 20px 10px;
  width: 220px;
  font-size: 0.8em;
  background: top left repeat-x;
  text-align: left;
  color: #aaa;
}

When I specify the position:absolute style for the footer and specify bottom:0, it places it relative to the browser window (IE7). How do I tell it to put the footer at the very bottom of the page?

You can see an example of this on my blog at http://DPotter.net/Technical/.

Thanks,
David

You don't need position:absolute at all. You need a method like this:
http://www.themaninblue.com/writing/...ve/2005/08/29/

Thanks for the reference. Unfortunately I wasn't able to get this to work, I think for the following reasons:

• I don't know the exact height of the footer
• This is a two-column theme (sidebar on the left and content on the right). The footer is displayed in the left column, under the sidebar. What I want is for the footer to be displayed below the lowest point of the content OR the sidebar, whichever is lower.

If I don't use absolute on the content, the sidebar doesn't display properly and the content is too wide (I tried changing the absolute to relative and that was the result).

I'll try to draw the intended result (periods represent whitespace since &nbsp doesn't work):

+---------+---------------------+
| sidebar | ......content...... |
| .blah.. | .......blah........ |
| .blah.. | .......blah........ |
| ....... | .......blah........ |
| ....... | .......blah........ |
| ....... | .......blah........ |
| ....... | .......blah........ |
| ....... | .......blah........ |
| ....... | ................... |
| footer. | ................... |
+---------+---------------------|



Thanks for your help.
David

This will keep the footer at the bottom of either column - you have to "wrap" the two columns inside another div:

<div id="wrapper">
<div id="sidebar">
<p>Donec ligula leo, egestas eu, dapibus vel, feugiat vitae, justo. Etiam varius. Fusce adipiscing turpis sed nisi.
Suspendisse gravida vulputate lectus. Suspendisse rhoncus est sed quam. In vel ligula.</p>
</div><!-- end sidebar -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam magna. Praesent risus metus, imperdiet sit amet, dignissim sed, semper eget, turpis. Etiam arcu lacus, bibendum at, commodo nec, pharetra vitae,
nunc. Nam sodales, eros ac pellentesque ornare, ipsum dui commodo nisl, ut suscipit lacus velit et metus. Praesent nonummy laoreet nisl. Sed imperdiet, neque eget volutpat fermentum, velit sapien porta lorem, id molestie augue nibh id ipsum. Duis fringilla dignissim arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div><!-- end content -->
<br class="clear" />
</div> <!-- end wrapper -->

<div id="footer">Footer here
</div><!-- end footer -->
</div><!-- end main -->

Styles (for fixed width area ):

body
{
font-size: 100.01%;
font-family: Verdana, Arial, sans-serif;
padding: 0;
margin: 0;
background: #fff url(images/bg.png) repeat-y top left;
height: 100%;
}
#main
{
height: 100%;
/*overflow: hidden;*/
margin: 0;
padding: 0;
border: 1px solid red;
}
#wrapper{
position: relative;
margin: 0 auto;
width: 800px;
background: #77ffc0;
height: 100%;
border: 1px solid green;

}

#content
{
padding: 0;
text-align: left;
color: #242424;
background: #ffe4b5;
font-size: 0.8em;
margin: 0 15px 0 245px;
}
#sidebar
{
width: 240px;
margin: 0;
padding: 0;
background: #b4b4b4;
font-size: 0.9em;
font-family: Arial, Helvetica, sans-serif;
float: left;
}

#footer
{
padding: 20px 0;
margin: 20px 10px;
width: 220px;
font-size: 0.8em;
background: top left repeat-x;
text-align: left;
color: #aaa;
background: #da70d6;
}

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

I used colors and outline to illustrate each area.

This gets me almost there. Thanks for taking the time to give me such a detailed response.

What I've noticed is that this combination of styles is very fragile to elements in the content with a style containing clear:both or clear:left. You can see the result at http://wordpress.dpotter.net/. Is there a way to restrict the effects of float and clear to just the content area when it appears there?

Thanks,
David

PS I removed all height:100% styles as that seems to take the height of the window, not the page.

PPS I didn't include the width:800px in the #wrapper style as I want the layout to be fluid.

Putting clear:both on the floated element generally doesn't work well.
Have a read thru this: http://css-discuss.incutio.com/?page=ClearingSpace

this combination of styles is very fragile to elements in the content

Not sure what you mean there. Styles are not fragile, per se, but you do have to understand the cascade and specificity.

However you do have a number of code problems - missing </div> tags, improperly formatted lists ( you can't have a <p> stuck in side a list>, missing <ul></ul>s.. fix the coding errors and then see what's happening.