arbitter Posted July 6, 2012 Share Posted July 6, 2012 Hi there. The title might be somewhat confusing, but here's the explanation. My site consists of the following layout: Header Left sidebar Main content Footer This I've got working nicely with the following code: HTML: <html> <body> <div id='total'> <div id='wrap'> <div id='banner'></div> <div id='main'> <div id='sidebar'> <div class='menuoption'></div> <div class='menuoption'></div> <div class='menuoption'></div> <div id='leftFill'></div> </div> <div id='content'>Variable content over here</div> </div> </div> <div id='footer'></div> </div> </body> </html> And the css: html{height:100%;} body{ margin:0 0 0 0; height:100%; } #total{ width:1024px; margin:auto; height:100%; } #wrap{ min-height:100%; } #main{ overflow:auto; padding-bottom:28px; /* Height of footer */ } #header{ height:100px; background-color:purple; } #sidebar{ width:149px; float:left; height:100%; } #content{ width:794px; float:left; min-height:600px; } #footer{ height:28px; margin-top: -28px; clear:both; position:relative; } So what's happening: the footer should always be at the bottom of the page, as long as the content inside #content is not larger than the height of the page. Otherwise, the footer goes to the foot of the document. Now the trouble is; I would like the #leftFill to have a border on the right side. But this bordershoul go from the last 'menuoption' down, up to the footer, wherever the footer is. How is this done? Quote Link to comment https://forums.phpfreaks.com/topic/265301-css-sticky-footer-main-div-height/ Share on other sites More sharing options...
anevins Posted July 6, 2012 Share Posted July 6, 2012 1. Give the #leftFill style a height of 100% 2. Change #content min-height to 444px; Quote Link to comment https://forums.phpfreaks.com/topic/265301-css-sticky-footer-main-div-height/#findComment-1359635 Share on other sites More sharing options...
arbitter Posted July 6, 2012 Author Share Posted July 6, 2012 1. Give the #leftFill style a height of 100% 2. Change #content min-height to 444px; This doesn't work... The height of the browser screen, and thus the height that the #content needs to be always differs... Quote Link to comment https://forums.phpfreaks.com/topic/265301-css-sticky-footer-main-div-height/#findComment-1359641 Share on other sites More sharing options...
anevins Posted July 6, 2012 Share Posted July 6, 2012 Instead You can float both sidebar and content divs left, removing the min-height, then apply a clearfix on the footer Maybe then re-apply the leftFill height of 100% Quote Link to comment https://forums.phpfreaks.com/topic/265301-css-sticky-footer-main-div-height/#findComment-1359643 Share on other sites More sharing options...
arbitter Posted July 6, 2012 Author Share Posted July 6, 2012 Instead You can float both sidebar and content divs left, removing the min-height, then apply a clearfix on the footer Maybe then re-apply the leftFill height of 100% They are both already floated left, and there is 'clear:both' in the footer already... Quote Link to comment https://forums.phpfreaks.com/topic/265301-css-sticky-footer-main-div-height/#findComment-1359654 Share on other sites More sharing options...
Mahngiel Posted July 6, 2012 Share Posted July 6, 2012 there is the "push" technique where you make the body height 100% !important but apply a negative margin to it css-tricks Quote Link to comment https://forums.phpfreaks.com/topic/265301-css-sticky-footer-main-div-height/#findComment-1359711 Share on other sites More sharing options...
hakimserwa Posted July 8, 2012 Share Posted July 8, 2012 played around with and go sourted replace your code with this one. <div id='total'> <div id='wrap'> <div id='banner'></div> <div id='main'> <div id='sidebar'> <div class='menuoption'>gggg</div> <div class='menuoption'>hhhh</div> <div class='menuoption'></div> <div id='leftFill'></div> </div> <div id='content'> <p>Variable content over herei</p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div style="clear:both";></div> </div> </div> <div id='footer'></div> </div> html{height:100%;} body{ margin:0 0 0 0; height:100%; } #total{ width:1024px; margin:auto; height:100%; } #wrap{ } #main{ overflow:auto; padding-bottom:28px; /* Height of footer */ } #header{ height:100px; background-color:purple; } #sidebar{ width:149px; float:left; height:100%; } #content{ width:794px; float:left; min-height:60%; } #footer{ height:28px; margin-top: 2px; clear:both; position:relative; } Quote Link to comment https://forums.phpfreaks.com/topic/265301-css-sticky-footer-main-div-height/#findComment-1360074 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.