Jump to content

Pushing Content Down After A Sticky Footer


Guest SteveStyle
 Share

Recommended Posts

Guest SteveStyle

Hi everyone, I'm new to CSS and just recently put my first page together. I eventually figured out I would need to make a sticky footer, and after reading a tutorial, got it working. The only problem now is that my main wrapper containing my background color is cutting off and not extending down to my footer when there isn;t enough content. Look here to see: http://www.smelton.com/help/index.htmlHere is my CSS (I apologize for the messy code, I am still learning!):Thank you so much for any help!

@charset "utf-8";/* CSS Document */html, body{	margin: 0px;	padding: 0px;	height: 100%;}.container {   min-height: 100%;   height: auto !important;   height: 100%;   margin: 0 auto -80px auto;   }/* Top Section with sweet pics */.top_image{	height: 160px;	width: 985px;	margin: 0px auto;	padding: 0px;	}.top_wrapper{	margin: 0px;	padding: 0px;	background-color: #5497de;}/* Menu Bar */.menu_wrapper{	margin: 0px;	padding: 0px;	background: url(images/menutop.jpg) repeat-x;	/*background-color: #000000*/}.menu_wrapper2{	height: 30px;	width: 975px;	margin: 0px auto;	padding: 0;}.menu{margin-left: -28px;}.menu ul{	margin: 0px;	padding: 0px;	list-style: none;	line-height: none;}.menu li{	margin: 0px;	padding: 0px;	display: block;	float: left;	padding-top: 5px;	padding-right: 30px;	padding-left: 30px;	font-size: 13px;	font-family: Arial, Helvetica, sans-serif;	color: #FFFFFF;	background: url(images/menuline3.jpg) no-repeat right 0px;}.menu a{	text-decoration: none;	color: #FFFFFF;	/*padding-right: 15px;*/	/*padding-left: 15px;*/		float: left;}.menu a:visited{	color: #FFFFFF;}.menu_right{	float: right;	margin-right: -65px;}.menu_right2{   float: right;	}.menu_right ul{	margin: 0px;	padding: 0px;	list-style: none;	line-height: none;}.menu_right li{	margin: 0px;	padding: 0px;	display: block;	float: left;	padding-top: 5px;	padding-right: 30px;	font-size: 13px;	font-family: Arial, Helvetica, sans-serif;	color: #FFFFFF;}.menu_right a{	text-decoration: none;	color: #FFFFFF;	padding-right: 30px;	background: url(images/menuline3.jpg) no-repeat right 0px;	float: right;}.menu_right a:visited{	color: #FFFFFF;}.menu_right2 ul{	margin: 0px;	padding: 0px;	list-style: none;	line-height: none;}.menu_right2 li{	margin: 0px;	padding: 0px;	display: block;	float: left;	padding-top: 5px;	padding-right: 30px;	font-size: 13px;	font-family: Arial, Helvetica, sans-serif;	color: #FFFFFF;}.menu_right2 a{	text-decoration: none;	color: #FFFFFF;	padding-right: 30px;	background: url(images/spacer.jpg) no-repeat right 0px;	float: right;}.menu_right2 a:visited{	color: #FFFFFF;}/* Main Page */.wrapper{   min-height: 100%;   height: auto !important;   height: 100%;   margin: 0 auto -80px auto;   background-color: #5497de;}/*.wrapper{	/*margin: 0px auto;	padding: 0px;	background-color: #5497de;    height: 100%;	min-height: 100%;	margin: 0 auto 0px auto;	/*position: relative;		}*/.main_page{	width: 985px;	background-color: #FFFFFF; 	min-height: 100%;   height: auto !important;   height: 100%;   margin: 0 auto -80px auto;	/*position: relative;*/	/*background: url(images/leftrise.jpg) repeat-y left top;*/	}.main_page p{	font-family: Arial, Verdana, sans-serif;	background-color: #fff;	color: #111;	text-decoration: none;	word-spacing: normal;	text-align: left;	letter-spacing: 0;	line-height: 1.2em;	font-size: 1em;}.main_page h1{	font-family: Georgia, Verdana, sans-serif;	background-color: #fff;	color: #111;	text-decoration: none;	word-spacing: normal;	text-align: left;	letter-spacing: 0;	line-height: 0.3em;	font-size: 1.5em;}.main_page small{	font-family: Arial, Helvetica, sans-serif;	background-color: #fff;	color: #111;	text-decoration: none;	word-spacing: normal;	text-align: left;	letter-spacing: 0;	line-height: 1.2em;	font-size: 0.7em;}.main_page a:link { 	color: #173D68;	text-decoration: none;}.main_page a:visited { 	color: #173D68;	}.main_page a:hover { 	text-decoration: underline;}.top_rounder{	width: 985px;	height: 25px;	padding: 0px;	/*background: url(images/toprounder.jpg) no-repeat left top;*/		}.content_main{		float: right; 	width: 635px;	padding: 30px 30px 0px 10px;	height: 100%;	/*margin: auto;*/		}.list_page{		float: right; 	width: 895px;	padding: 30px 30px 20px 10px;		}.content_sidebar{	float: left;	width: 260px;	padding: 30px 5px 0px 30px;	height: auto;	}.content_sidebar p{	font-family: Georgia, Verdana, sans-serif;	background-color: #fff;	color: #111;	text-decoration: none;	word-spacing: normal;	text-align: left;	letter-spacing: 0;	line-height: 1.em;	font-size: 1em;}.hz_line{	height: 5px;}.content_sidebar link{		margin-top: -10px;		margin-bottom: -10px;		font-family: Georgia, Verdana, sans-serif;		text-decoration: none;		word-spacing: normal;		text-align: left;		letter-spacing: 0;		line-height: 1em;		font-size: 0.9em;				}.content_sidebar a:link, a:visited{	text-decoration: none;	color: #173D68;	font-family: Georgia, Verdana, sans-serif;	text-decoration: none;	word-spacing: normal;	text-align: left;	letter-spacing: 0;	line-height: 1.em;	font-size: 0.9em;}.content_sidebar a:hover{	text-decoration: underline;}.content_sidebar h1{	font-family: Georgia, Verdana, sans-serif;	background-color: #fff;	color: #111;	text-decoration: none;	word-spacing: normal;	text-align: left;	letter-spacing: 0;	line-height: 0.3em;	font-size: 1.2em;}/* Footer!!! */.footer_wrapper{		height: 70px;	margin: 0px;	background-color:#1a1a1a;  /*  position: relative;*//*	background: url(images/footer.jpg) repeat-x top left; */	}.footer{	width: 930px;	padding: 0px 0px 0px 55px;	margin: 0px auto;	color:#FFF}.stickyfooter{   height: 80px;   clear: both;   position: relative;   background-color:#1a1a1a}.nudge{	height: 80px;	clear: both;}

And here is my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link href="style.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Work!!</title></head><body><div class="container">   <div class="menu_wrapper">	<div class="menu_wrapper2">    	<div class="menu">        <ul>    	<li><a href="#">Home</a></li>        <li><a href="#">Portfolio</a></li>        <li><a href="#">Forum</a></li>        <li><a href="#">Shop</a></li>        <li><a href="#">Games</a></li>        <li><a href="#">Contact</a></li>    </ul>             </div>	<div class="menu_right">    <ul>    	<li><a href="#">Login</a></li>        <div class="menu_right2">        <li><a href="#">Register</a></li>    </ul>     </div>        </div>      </div><div class="top_wrapper">	<div class="top_image">        <img src="images/topimage1.jpg" />    </div></div><div class="wrapper">	<div class="main_page">         <div class="content_main">         <h1>Current Project</h1>    <small>Thursday, October 18th 10:42 PM By <a href="contact.html">Steve Melton</a></small>   <p>The project I'm currently working on is being able to let you register and log into the site. Making this account will eventually land you some "Steve Bucks" that you'll be able to spend in the store for some sweet stuff like high fives and hearty handshakes! </p>   <!-- <hr />    <h1>Site Suggestions</h1>    <small>Thursday, October 8th 11:11 PM By <a href="contact.html">Steve Melton</a></small>    <p>If you have any suggestions for the site, please let me know! If you have any ideas for a cool game or feature or you have a comment on how something looks, let me know! Email me or hit the contact link at the top to send me a message. All suggestions and comments are welcome! </p>    <hr />    <h1>Welcome to Smelton.com</h1>    <small>Thursday, October 8th 11:01 PM  By <a href="contact.html">Steve Melton</a></small>    <p>This is the very first post created on Smelton.com! No, this isn't generated through and outside form and I did indeed just type this here. Thankfully, this is just the first step for the website! Expect many changes to come to the site as I work on it, and check out the bar on the left to see my upcoming projects!</p> <hr />    <br />-->                      </div>      <!--<div class="content_sidebar">       <h1>Upcoming Projects!</h1>    <br />    <h1>HTML</h1>   <hr />    <link><a href="#">Contact Section</a></link>    <hr />    <br />    <h1>PHP and SQL</h1>    <hr />    <link><a href="#">Message Board</a></link>    <hr />    <link><a href="#">Mockup Store</a></link>    <hr />    <link><a href="#">User Registration</a></link>    <hr />    <link><a href="#">Backend With Front Page Updates</a></link>    <hr />    <br />    <h1>Javascript</h1>    <hr />    <link><a href="#">Pick a Num: The Game</a></link>    <hr />    <br />    <h1>Flash</h1>    <hr />    <link><a href="#">Dodgeball</a></link>    <hr />    <br />    <h1>Recently Completed</h1>    <hr />    <link><a href="#">Front Page Layout</a></link>    <hr />      </div>-->           <div style="clear: both;"></div>      </div>   </div><div class="nudge"></div></div><div class="stickyfooter">	<div class="footer">    IS THIS WORKING?!    </div></div>   </body></html>

Edited by SteveStyle
Link to comment
Share on other sites

Well, setting the same background color to .wrapper makes the blue extend right to the bottom, but then it runs underneath the main content page if it doesn't reach the footer. Setting a min-height of something sensible like 400px to .main_page fixes that by making the main content touch the footer. This might mean you lose content later behind the footer, should it extend beyond there, so an inner div with a fixed height and overflow: auto or something might be handy..

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...