Help with clearing footer div from the Layout Pack templates

[smallandround]

Hi I am using one of the brilliant layout templates from css_tricks and am having issues with my side bar. I would like the footer to clear or push down when content is added to it. I know I can just add content to my page-wrap and it will push the footer down but I am looking for a better solution. Should I float my side bars and just have my footer div clear both? Here is a link to the page I am working on: http://www.pikolove.com/echt/artists/oben_abright/cv.html

Thank You
Jeremiah

[Bob]

Perhaps what you mean, is a sticky footer.

[smallandround]

I think I solved the problem by floating my sidebars and adding a empty div inside the page-wrap that clears both. It’s not really the solution i was looking for but it seems to work. oh well. here’s what it looks like: http://www.pikolove.com/echt/artists/oben_abright/cv.html

[smallandround]

Thanks for the sticky footer link. Looks like a good one to use.

[smallandround]

Still wondering if there is anyway to get the content in the right sidebar to not overflow over the footer. Here is the template html and css. I added some extra content in the side bar to demo what I am talking about.

/*
https://css-tricks.com
*/

* { margin: 0; padding: 0; }
body { font: 15px/2 Georgia, serif; background: #999; }

h1 { color: white; padding: 10px; }

#page-wrap { max-width: 960px; min-width: 560px; margin: 0 auto; position: relative; zoom: 1; }

#header { max-width: 960px; min-width: 560px; background: #222;
margin: 15px auto 0; }

#main-content { padding: 0 190px; background: white; }

#main-sidebar { position: absolute; left: 0; top: 0; width: 160px; bottom: 0;

background: #eee; padding: 0 10px; }

#secondary-sidebar { position: absolute; right: 0; top: 0; width: 160px; bottom: 0;
background: #eee; padding: 0 10px }

#footer { max-width: 960px; min-width: 560px; background: #222;
margin: 0 auto 15px; }
#footer p { padding: 10px; color: white; }
#footer a { color: white; border-bottom: 1px dotted white; text-decoration: none; }
#footer a:hover { border-bottom-style: solid; }

Fixed, Fluid, Fixed

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Part of the CSS-Tricks Layout Pack

[Author]

Posts