I've got a shadow wrap, and regular wrap, I'm trying to get the footer to stick to the bottom. Problem is I'm getting a huge gap between the mainText/mainContent div and the footer.
mainText is for the text padding, but I might just change that to a <P> and add the padding like that which might solve the problem I'm having but I've tried removing mainText with no luck.
Question
fock neow1n
CSS
html, body { margin: 0; background: #CCCCCC; height: 100%; } .source #shadow { margin: 0 auto; width: 840px; min-height: 100%; height: 100%; } .source #container { background-image: url(images/shadow.png); background-repeat: repeat-y; padding-left: 20px; margin: 0 auto; width: 840px; min-height: 100%; height: 100%; } .source #header { padding: 0; margin: 0; height: 240px; width: 800px; } .source #links { background-image: url(images/Untitled-1_02.png); padding: 0px; margin: 0px; color: #dbe5ec; height: 21px; width: 800px; } .source #links ul,li { margin: 5px 5px 5px 10px; padding-top: list-style: none; display: inline; } .source #mainContent { background-image: url(images/Untitled-1_06.png); margin: 0; width: 800px; height: 100%; } .source #mainContent #mainText { position: relative; padding-left: 30px; padding-bottom: 60px; width: 800px; color: #000000; height: 100%; clear: both; } .source #footer { position: absolute; background-image:url(images/Untitled-1_05.png); height: 60px; bottom: 0; width: 800px; }HTML
<body class="source"> <div id="shadow"> <div id="container"> <div id="header"> <img src="images/Untitled-1_01.png" width="800" height="240" alt="" /> </div> <div id="links"> <ul> <li><a href="home">Home</a></li> <li><a href="home">Home</a></li> <li><a href="home">Home</a></li> <li><a href="home">Home</a></li> </ul> </div> <div id="mainContent"> <img src="images/Untitled-1_04.png" width="800" height="19" alt="" /> <div id="mainText"> asd <!-- end #mainContent --> </div> </div> <div id="footer"> </div> </div> </div>I've got a shadow wrap, and regular wrap, I'm trying to get the footer to stick to the bottom. Problem is I'm getting a huge gap between the mainText/mainContent div and the footer.
mainText is for the text padding, but I might just change that to a <P> and add the padding like that which might solve the problem I'm having but I've tried removing mainText with no luck.
Suggestions, advice, comments appreciated.
Link to comment
Share on other sites
10 answers to this question
Recommended Posts