...

View Full Version : Pushing content down after a sticky footer



SteveStyle
10-20-2009, 06:40 PM
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!





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

SB65
10-20-2009, 11:23 PM
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.

Excavator
10-20-2009, 11:55 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum