Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pushing content down after a sticky footer

    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.html

    Here is my CSS (I apologize for the messy code, I am still learning!):

    Thank you so much for any help!

    Code:
    
    @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:

    Code:
    <!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>
    Last edited by SteveStyle; 10-20-2009 at 11:30 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    One solution might be to apply those two blue "sidebars" by creating an image containing the two bars, and setting this as the background on #container.

    Otherwise, I can't think of a way of doing this and preserving your sticky footer and your current design.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello SteveStyle,
    It looks like you need to use faux columns to make that work. Here's an example I did for another user on this forum - http://nopeople.com/SoC/

    Here is faux columns demonstration - http://nopeople.com/CSS/faux_columns/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •