SmokingMan Posted January 15, 2007 Share Posted January 15, 2007 I can't seem to get the content of the page to extend to the bottom of the page if the content falls short. How can I tweak my CSS to get the page to fill to the bottom even if the content doesn't extend that far?CSS: body{ background: transparent; background-color: #ffffff;}/* container for entire content */.container{ width: 90%; margin:auto; height: 100%; border: solid; border-color: black; border-width: 2px;}.wrapper1{ width: 100%; height: 100%; background-color:#ff0000; border: none; z-index: -200;}.wrapper2{ width: 99%; margin: auto; height: 100%; border: none; background-color:#ffff00; z-index: -100;}.pagecontent{ width: 98%; height: 100%; margin: auto; overflow: hidden; background: transparent; background-color: #e1edfb; border: none; z-index: 100;}/* general styles for left, right, and bottom containers */ .banner{ width: 98%; height: auto; position: relative; border: none; padding-bottom: 10px; margin-bottom: 20px; margin: auto; border-bottom: double; border-bottom-color: maroon; text-align: center; background: transparent; background-color: #e1edfb; z-index: 150;} .lcontainer{ float:left; margin-top: 10px; margin-bottom: 10px; position: relative; width: 19%; background: transparent; background-color: #e1edfb;} .rcontainer{ float: right; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; position: relative; margin-left: 5px; width: 77%; border: inset; border-width: 2px; background: transparent; background-color: #e1edfb;} .footer{ clear: both; width: 95%; margin: auto; margin-top: 10px; height: auto; border-top: double; border-top-color: maroon; padding-top: 10px; text-align: center; background: transparent; background-color: #e1edfb;} XHTML: <body><div class="container"> <div class="wrapper1"> <div class="wrapper2"> <div class="pagecontent"> <div class="banner"> <img alt= "HotDog-Hut Banner" src= "images/hdh-anim1.gif" height= "100" title= "HotDog-Hut Banner" width= "584" /> </div> <div class="lcontainer"> <?php require("indexnav.html"); ?> </div> <div class= "rcontainer"> <?php require("welcome.html"); ?> <br /> </div> <div class="footer"> <?php require("footer.html"); ?> </div> </div> </div> </div></div></body> Here's a link to the page in question. I just want the footer to always be at least to the bottom of the page. At this point I've tried all I can think of other than just putting enough '<br />'s' in the markup to make it go to the bottom. But that's just unseemly Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now