12 replies [Last post]
comatoseduck
comatoseduck's picture
Offline
Regular
Last seen: 10 years 46 weeks ago
Timezone: GMT-5
Joined: 2010-06-03
Posts: 25
Points: 42

Alrighty I am editing this code back and forth with someone and we both ran into the problem of there being a white space below the footer that varies in height between the different pages. I do know that sticky footers exist but I am not sure how to implement it into my code. So I guess the question for all you peoples on the internets is how do I get the white space at the bottom of my footer to disappear? ANY help or a point in the right direction would be awesome! Thanks!!!!! Oh and you can check out the site at (if it helps)

@charset "utf-8";
 
/** General Layout **/
 
/* ---------------------------------------------------------------- 
 *  Navigation
 * ---------------------------------------------------------------- 
*/ 
#header_wrap {
	background: #fff url(images/backgrounds/background_short.png) repeat-x;
	height: 201px;
	position: relative;
	min-width: 1020px;
}
#header_wrap_home {
	background: #fff url(images/backgrounds/background.png) repeat-x;
	height: 398px;
	position: relative;
	padding-bottom: 100px;
	min-width: 1020px;
}
.rss {
	position: absolute;
	top: 10px;
	left: 20px;
}
.media_temple {
	position: absolute;
	top: 10px;
	right: 20px;
}
#navigation {
	/* width: 609px; 
	width: 424px;*/
	width: 509px;
	height: 36px;
	position: absolute;
	top: 65px;
	right: 0px;
}
.tabs a {
	height: 36px;
	margin-left: 5px;
	text-indent: -9999px;
	float: left;
}
.home_nav a {
	background: url(images/navigation/nav_home.png) no-repeat 0 -36px;
	width: 76px;
}
.portfolio_nav a {
	background: url(images/navigation/nav_ourwork.png) no-repeat 0 -36px;
	width: 111px;
}
.services_nav a {
	background: url(images/navigation/nav_ourservices.png) no-repeat 0 -36px;
	width: 133px;
}
.about_nav a {
	background: url(images/navigation/nav_ourservices.png) no-repeat 0 -36px;
	width: 133px;
}
.notebook_nav a {
	background: url(images/navigation/nav_notebook.gif) no-repeat 0 -36px;
	width: 114px;
}
.contact_nav a {
	background: url(images/navigation/nav_contact.png) no-repeat 0 -36px;
	width: 101px;
}
#navigation a:hover, #navigation a.current {
	background-position: 0 0;
}
* {margin:0; padding:0;}
 
html, body {
	margin:0px;
	padding:0px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif;
	font-size: 12px;
	position:relative;
	line-height: 1.68em;
	background: #fff;
	color:#6e6e6e;
	text-align:left;
	height: 100%;
}
 
.clear {
	clear: both;
	height: 0;
	width: 0;
	line-height: 0;
	font-size: 0px;
}
 
.hidden {display:none;}
 
.round {-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
 
#site-wrapper {
   height: auto;
   position:relative;
   overflow:hidden;
   padding-bottom:10px;
}
#footer-wrapper {
height:auto;
clear:both;
overflow:hidden;
position:relative;
z-index: 10;
width:100%;
background:#000 url(images/footer-bg.jpg) repeat-x left top;
}
.no-margin {margin-right:0 !important;}
 
.container {margin:0 auto; width:960px; position:relative;}
 
/** Typography **/
 
h1 {font-weight:normal; font-size:36px; line-height:38px;}
h2 {font-weight:normal; font-size:30px; line-height:34px;}
h3 {font-weight:normal; font-size:22px; line-height:30px;}
h4 {font-weight:normal; font-size:18px; line-height:22px;}
h5 {font-weight:normal; font-size:16px; line-height:19px;}
h6 {font-weight:normal; font-size:14px; line-height:16px;}
 
h1, h2, h3, h4, h5, h6 {
	margin-bottom:10px;
	color:#000;
}
#content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a, #content h6 a {color:#000;}
 
.left {float:left; margin-right:8px; margin-bottom:2px; border:#dfdfdf 2px solid; margin-top:5px;}
.right {float:right; margin-left:8px; margin-bottom:2px; border:#dfdfdf 2px solid; margin-top:5px;}
 
.hr {height:1px; border-bottom:#cacaca 1px solid; display:block; margin-bottom:30px;}
em {font-style:italic;}
strong {font-weight:bold;}
 
#content ul {list-style:circle; list-style-position:inside; padding-left:2px; margin-bottom:15px; padding-left:15px;}
#content ol {list-style:decimal; list-style-position:inside; margin-bottom:15px; padding-left:15px;}
 
code, pre {
background:url(images/code_bg.png) repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
color:#000000;
display:block;
font-family:Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
font-size:12px;
line-height:20px;
margin:10px 0 20px;
overflow:auto;
padding:0 3px;
}
 
blockquote {font-family:Georgia, "Times New Roman", Times, serif; font-style:italic;}
blockquote span.author {font-size:11px; color:#333333; display:block; text-align:left; padding-top:10px;}
 
#content p {margin-bottom:30px;}
#content a {color:#ee9b00;}
#content a:hover {text-decoration:underline;}
 
#content .button {padding:6px; font-size:10px; text-transform:uppercase;background:#333333; color:#fff; text-decoration:none; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-bottom:8px; border:none;}
#content .button:hover { background:#ffb03a; color:#333333; text-decoration:none;}
 
/** Header **/
 
#home-page #header {background:url(images/orange/home-bg.jpg) repeat-x top left; height:540px;  position:relative; margin-bottom:10px;}
 
#sub-page #header {
	background:url(images/orange/sub-bg.jpg) repeat-x top left;
	height:250px;
	position:relative;
	margin-bottom:10px;
}
 
#top {height:180px;}
 
#header #logo {margin-top:60px;}
#header #main-nav {
	position:relative;
	margin-top:70px;
	z-index:250;
}
 
#logo {height:43px; width:160px; display:block; float:left;}
#logo h1 , #logo h1 a {display:block; height:100%; width:100%; float:left;}
 
#main-nav {float:right; width:auto; height:35px; position:relative; z-index:20;}
#main-nav ul {z-index:250;}
ul.sf-menu {background:url(images/blue/nav-left1.png) no-repeat top left;}
#nav-finish {float:right; background:url(images/blue/nav-right1.png) no-repeat top right; width:8px; height:35px;}
 
/** Slider **/
 
#slider-holder {height:390px; width:960px; background:url(images/slider-holder.png) no-repeat top left; position:absolute; top:150px; left:;z-index:7;}
#slider {top:10px; left:10px; z-index:3;}
#slider h1, #slider h2, #slider h3, #slider h4, #slider h5, #slider h6 {color:#FFFFFF}
#slider-nav {position:absolute; top:20px; left:20px; z-index:30; background:#fff; padding:7px 5px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; width:8px;}
#slider-nav a {text-indent:-9999px; height:8px; width:8px; display:block; float:left; background:url(images/slider-anchor.png) no-repeat top left; margin-right:3px; margin-bottom:3px;}
#slider-nav a:hover, #slider-nav a.activeSlide {background:url(images/slider-anchor.png) no-repeat bottom left;}
 
/** Page-Name **/
 
#pagename {height:100px; position:relative; background:url(images/orange/pagename-bg.jpg) no-repeat top left;}
#pagename h2 {height:51px;  float:left; margin-right:30px; margin-top:25px;}
#pagename h2 span {background:url(images/pagename-left.png) no-repeat top left;float:left; display:block; padding:10px 0 0 19px; color:#fff; height:51px;}
#pagename p.tagline {font-size:20px; color:#000;padding-top:40px;}
#pagename-finish {display:block; height:51px; width:26px; float:left;}
 
/** Content **/
 
#content {height:auto; overflow:visible;}
 
/** Main-Cloum **/
 
#main-colum {height:auto; overflow:visible; float:left; display:block; position:relative;}
 
#welcome-box {height:auto; overflow:hidden;}
#features-box {
	height:auto;
	overflow:hidden;
}
 
.service-box {
	height:137px;
	width:300px;
	margin-right:30px;
	margin-bottom:15px;
	margin-top:5px;
	background:url(images/service-box.png) no-repeat top left;
	float:left;
}
.service-box p {font-size:10px; line-height:1.68em;}
.service-box .inside {
	padding:20px 10px 0 10px;
	height:100px;
}
.service-box .inside img {border:none; background:none; float:left; margin-top:-4px; margin-right:5px;}
.service-box .inside h4 {margin-bottom:7px;}
.service-box .inside a {display:block;}
 
/** Sidebar **/
 
#sidebar {display:block; position:relative;}
#sidebar ul { list-style-type:none; list-style-position:outside; padding:0; margin:0;}
 
.widget .inside {-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
 
.widget {height:auto; overflow:hidden; margin-bottom:40px; background:url(images/widget-shadow.png) no-repeat bottom center; padding-bottom:13px;}
.widget .inside { background:#fff url(images/widget-bg.png) repeat-x top center; border:#d1d1d1 1px solid; padding:12px 15px;}
.widget ul { list-style-position:outside; list-style-type:none; margin:0 0 7px 0; padding:0;}
.widget ul li {list-style-type:none;}
.widget ul li a {background:#fff; border-bottom:#d1d1d1 1px solid; display:block; padding:7px 0 7px 5px; color:#ee9b00;}
.widget ul li li a {padding-left:15px;}
.widget p {margin-bottom:0 !important;}
 
#latest-posts ul li {background:#fff; border-bottom:#d1d1d1 1px solid; display:block; overflow:hidden; padding:7px 0 7px 5px; color:#666666;}
#latest-posts ul li a {padding:0; color:#ee9b00; border:none;}
#latest-posts ul li a img {float:left; margin-right:7px; border:#dfdfdf 2px solid;}
#latest-posts ul li a:hover img {float:left; margin-right:7px; border:#b4b4b4 2px solid;}
#latest-posts ul li p {margin-bottom:0;}
#latest-posts .img-load {
	background:url(images/loader.gif) no-repeat 50% 50% !important;
	display:block;
	float:left;
	height:50px;
	width:50px;
	margin-right:12px;
}
 
#contact-info img {border:#dfdfdf 2px solid; margin-bottom:5px;}
 
/** Portfolio **/
 
#content ul.list, #content ul.grid {list-style:none outside; overflow:hidden; padding:0; margin:0;}
#content ul.list h3 a:hover, #content ul.grid h3 a:hover {text-decoration:none;}
 
.switcher-wrap {display:block; overflow:hidden; margin-bottom:20px;}
a.switch_thumb {
    width: 122px;
    height: 27px;
    line-height: 27px;
    margin: 0 auto;
    display: block;
	float:left;
    background: url(images/portfolio-switcher.png) no-repeat top left;
    text-indent: -9999px;
}
a:hover.switch_thumb {filter:alpha(opacity=75); opacity:.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";}
a.swap { background-position: left bottom;}
 
.list .port-box {float:left; border-bottom:#CACACA 1px solid; padding-bottom:30px; margin-bottom:30px;}
.list .port-box .img-load {background:url(images/loader.gif) no-repeat 50% 50% !important; display:block; float:left; height:150px; width:290px; margin-right:18px;}
.list .port-box .img-load img {border:#dfdfdf 2px solid;}
.list .port-box .img-load:hover img {border:#b4b4b4 2px solid;}
.list .port-box p {margin-bottom:12px !important;}
 
.grid .port-box {float:left; height:auto; overflow:hidden; width:300px; margin:0 10px; position:relative; margin-bottom:30px;}
.grid .port-box h3 a {position:absolute; top:15px; left:2px; background:#fff; padding:5px; color:#000;}
.grid .port-box .img-load {background:url(images/loader.gif) no-repeat 50% 50% !important; display:block; float:left; height:150px; width:290px;}
.grid .port-box .img-load img {border:#dfdfdf 2px solid;}
.grid .port-box .img-load:hover img {border:#b4b4b4 2px solid;}
.grid .port-box .meta {display:none;}
.grid .port-box p {display:none;}
.grid .port-box a.button {display:none;}
 
.meta {margin-bottom:7px;}
.meta .category, .meta .date, .meta .comments {width:auto; margin-right:20px; padding-left:20px;}
.meta .category {background:url(images/mini-icons/category.png) no-repeat left top;}
.meta .date {background:url(images/mini-icons/clock.png) no-repeat left top;}
.meta .comments {background:url(images/mini-icons/comment.png) no-repeat left 1px;}
 
/** Blog **/
 
.post {float:left; border-bottom:#CACACA 1px solid; padding-bottom:30px; margin-bottom:30px;}
.post .img-load {background:url(images/loader.gif) no-repeat 50% 50% !important; display:block; float:left; height:150px; width:150px; margin-bottom:8px; margin-right:18px;}
.post .img-load img {border:#dfdfdf 2px solid;}
.post .img-load img:hover {border:#b4b4b4 2px solid;}
 
/** Comments **/
 
#comments .commentlist {list-style-type:none; list-style-position:outside; overflow:hidden;}
#comments h3 {margin-bottom:30px !important; text-transform:capitalize;}
#comments .commentlist li {margin-bottom:55px; height:auto; width:630px; overflow:hidden;}
#comments .commentlist .comment-left {float:left; width:80px; height:100%; margin-right:30px;}
#comments .commentlist .comment-left img {margin:0 0 10px;}
#comments .commentlist .comment-left a {text-align:center; display:block;}
#comments .commentlist .comment-right {float:left; width:470px; overflow:hidden; border:#CACACA 1px solid; padding:15px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
 
#comments #respond {height:auto; overflow:hidden;}
#comments #respond form p small {color:#6E6E6E !important; }
#comments #respond #commentform input, #comments #respond #commentform textarea {font-size:12px; font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif; color:#6E6E6E; border:#CACACA 1px solid; padding:2px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#comments #respond #commentform input {height:18px;}
#comments #respond #commentform #submit {float:left; border:none; font-size:12px; cursor:pointer; height:auto; color:#fff; padding:5px 8px;}
#comments #respond #commentform #submit:hover {color:#000;}
 
/** Contact us Form **/
 
#contact_us {width:460px; margin:25px 0px 0px; overflow:hidden;}
textarea#styled {
	border: 3px solid #cccccc;
	padding: 5px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif;
 
}
 
#contact_us p.label_name, #contact_us p.input_form {float:left; margin-bottom:10px;}
p.label_name {width:80px; clear:both; color:#7f7e7e; font-size:13px;}
 
#contact_us input, #contact_us textarea {width:370px; background:#fff; border:#CACACA 1px solid; font-size:12px; padding:4px; margin-bottom:15px; color:#6E6E6E; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; font-family:"Lucida Sans Unicode", "Lucida Grande", Garuda, sans-serif;}
#contact_us input.button {cursor:pointer; width:auto; float:right; font-size:12px;}
 
#feedback p {margin-bottom:5px;}
p.error {display:none; padding:5px 0px; color:#FF3300; font-weight:bold;}
p#submit {text-align:right;}
p#success {display:none; font-size:16px; text-align:left; margin-bottom:20px; color:#00abe0; font-style:italic;}
 
/** Footer **/
#footer-wrapper {padding-bottom:30px;}
.footer-widget {height:auto; overflow:hidden; margin-top:65px;}
.footer-widget ul {list-style-position:outside; list-style-type:none; margin:0; padding:0;}
.footer-widget ul li {list-style-type:none;}
.footer-widget h3 {color:#fff;}
.footer-widget ul li a {background:#000; border-bottom:#424242 1px solid; display:block; padding:7px 0 7px 5px; color:#CCCCCC;}
.footer-widget ul li a:hover {color:#fff;}
.footer-widget p {color:#b8b8b8; margin-bottom:20px;}
.footer-widget p a {color:#fff;}
.footer-widget p a:hover {color:#fff; text-decoration:underline;}
 
.social-links li {list-style:none; list-style-position:outside; border:none; float:left;}
.footer-widget ul.social-links li a {background:none !important; border-bottom:none !important; float:left; padding:0 3px 0 0 !important; display:inline !important; overflow:hidden;}
.social-links img {float:left !important;}
 
/** CUSTOM STUFF **/
 
.close {cursor:pointer; position:absolute; top:0px; right:5px; font-weight:bold;}
 
.info-box {display:block; border:1px solid #AFDBEE; background: url(images/mini-icons/info.png) no-repeat scroll 8px 55% #E4F5FD; padding:10px 10px 10px 35px; margin:0; color:#2A80A7; font-size:13px; position:relative;}
.info-box a {color:#2A80A7; border-bottom:#2A80A7 1px solid;}
.info-box a:hover {color:#2A80A7; border-bottom:none !important;}
 
.warning-box {display:block; border:1px solid #efdc75; background: url(images/mini-icons/warning.png) no-repeat scroll 8px 55% #fff7cb; padding:10px 10px 10px 35px; margin:0; color:#DB7701; font-size:13px; position:relative;}
.warning-box a {color:#DB7701; border-bottom:#DB7701 1px solid;}
.warning-box a:hover {color:#DB7701; border-bottom:none !important;}
 
.success-box {display:block; border:1px solid #b3dc7c; background: url(images/mini-icons/success.png) no-repeat scroll 8px 55% #e8ffca; padding:10px 10px 10px 35px; margin:0; color:#527A19; font-size:13px; position:relative;}
.success-box a {color:#527A19; border-bottom:#527A19 1px solid;}
.success-box a:hover {color:#527A19; border-bottom:none !important;}
 
.error-box {display:block; border:1px solid #ebb1b1; background: url(images/mini-icons/error.png) no-repeat scroll 8px 55% #ffd6d6; padding:10px 10px 10px 35px; margin:0; color:#9d2121; font-size:13px; position:relative;}
.error-box a {color:#9d2121; border-bottom:#9d2121 1px solid;}
.error-box a:hover {color:#9d2121; border-bottom:none !important;}
 
.info-box, .warning-box, .success-box, .error-box {margin-bottom:20px; margin-top:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
 
.dropcap {font-size:40px; float:left; line-height:1.0em; padding-right:6px; color:#0a2f41;}
 
.full-width {width:960px;}
.one_half {width:465px;}
.one_third {width:300px;}
.one_forth {width:217.5px;}
.two_third {width:630px;}
.three_forth {width:712.5px;}
 
.one_half, .one_third, .one_forth, .two_third, .three_forth {float:left; margin-right:30px; height:auto; overflow:hidden;}

MY index file

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> </title> 
 
<!-- CSS --> 
<link rel="stylesheet" href="css/reset.css" type="text/css" /> 
<link rel="stylesheet" href="style.css" type="text/css" /> 
<!-- This is where you choose your color scheme - Just change the stylesheet name to the color you want. --> 
<link rel="stylesheet" href="css/blue.css" type="text/css" /> 
<!-- You can choose from the following: red, orange, green, blue and violet. --> 
<link rel="stylesheet" href="css/superfish.css" type="text/css" /> 
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.3.custom.css" /> 
<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" /> 
 
<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]--> 
 
<!-- Scripts --> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.cycle.all.js"></script> 
<script type="text/javascript" src="js/jquery.easing.js"></script> 
<script type="text/javascript" src="js/jqFancyTransitions.js"></script> 
<script type="text/javascript" src="js/coin-slider.js"></script> 
<script type="text/javascript" src="js/ui.core.min.js"></script> 
<script type="text/javascript" src="js/ui.tabs.min.js"></script> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
<script type="text/javascript" src="js/superfish.js"></script> 
<script type="text/javascript" src="js/cufon-yui.js"></script> 
<script type="text/javascript" src="js/Delicious.font.js"></script> 
<script type="text/javascript" src="js/jquery.form.js"></script> 
<script type="text/javascript" src="js/bluz.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('#slider').cycle({
		timeout:         6000,  // milliseconds between slide transitions
		easing: 'easeInOutCubic',
		pager:  '#slider-nav',
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script> 
</head> 
<body id="home-page"> 
<!-- site-wrapper START here --> 
<div id="site-wrapper"> 
  <!-- header START here --> 
<div id="header_wrap_home"> 
	<div id="header"> 
		<span class="gradient"></span> 
    <!-- container START here --> 
    <div class="container"> 
      <!-- top START here --> 
      <div id="top"> 
        <!-- logo START here --> 
        <div id="logo"> 
          <h1><img src="images/logo.png" alt="mcmbrand" /></h1> 
        </div> 
        <!-- logo END here --> 
 
        <!-- main-nav START here --> 
<div id="navigation"> 
	<span class="home_nav tabs"><a href="index.html" class="current">Home</a></span> 
	<span class="portfolio_nav tabs"><a href="ourwork.html">Our Work</a></span> 
		<span class="about_nav tabs"><a href="ourservices.html">Our Services</a></span> 
	<span class="contact_nav tabs"><a href="contactus.html">Contact Us</a></span> 
</div> 
        <!-- main-nav END here --> 
      </div> 
      <!-- top END here --> 
      <!-- slider-holder START here --> 
      <div id="slider-holder"> 
        <div id="slider"> <img src="images/slider/slide1.jpg" alt="" /> <img src="images/slider/slide2.jpg" alt="" /> <img src="images/slider/slide3.jpg" alt="" /> <img src="images/slider/slide4.jpg" alt="" /> </div> 
      </div> 
      <!-- slider-holder END here --> 
    </div> 
    <!-- container END here --> 
  </div> 
  <!-- header END here --> 
  <!-- content START here --> 
  <div id="content"> 
    <!-- container START here --> 
    <div class="container"> 
      <!-- main-colum START here --> 
      <div id="main-colum" class="two_third"> 
        <!-- Welcome box START here --> 
        <div id="welcome-box"> 
          <h1><img src="images/welcome.png" width="640" height="79" /></h1> 
          <div class="hr"></div> 
        </div> 
        <!-- Welcome box END here --> 
        <!-- features-box box START here --> 
        <div id="features-box"> 
          <h1><img src="images/solutions.png" width="295" height="30" /><strong></strong> </h1> 
          <!-- service-box #1 START here --> 
          <div class="service-box"> 
            <div class="inside"> <img src="images/mac.png" alt="" /> 
              <br /><h4></h4><br /> 
              <p>We custom build our websites from scratch and start with a pencil and paper. We use the latest technology and follow approved web standards.</p> 
            </div> 
          </div> 
          <!-- service-box #1 END here --> 
          <!-- service-box #2 START here --> 
          <div class="service-box no-margin"> 
            <div class="inside"> <img src="images/package.png" alt="" /> 
              <br /><h4></h4><br /> 
              <p>We offer the complete package for online marketplaces that require marketing, branding and application development.</p> 
            </div> 
          </div> 
          <!-- service-box #2 END here --> 
          <!-- service-box #3 START here --> 
          <div class="service-box"> 
            <div class="inside"> <img src="images/branding.png" alt="" /> 
              <br /><h4></h4><br /> 
              <p>We give you an identity and a name that your clients will remember. Our online advertising campaigns are unique strategic and effective.</p> 
            </div> 
          </div> 
          <!-- service-box #3 END here --> 
          <!-- service-box #4 START here --> 
          <div class="service-box no-margin"> 
            <div class="inside"> <img src="images/camera.png" alt="" /> 
              <br><h4></h4><br /> 
                <p>We design creative graphics for print media and online advertising. Our designers are very unique and stay up to date with the latest trends.</p> 
            </div> 
          </div> 
          <!-- service-box #4 END here --> 
        </div> 
        <!-- features-box box END here --> 
      </div> 
      <!-- main-colum END here --> 
      <!-- sidebar START here --> 
      <div id="sidebar" class="one_third no-margin"> 
        <ul> 
          <!-- widget START here --> 
          <li class="widget" id="latest-posts"> 
            <div class="inside"> 
              <h3><img src="images/welcome3.png" width="" height="" /></h3> 
              <ul> 
                <li> <a href="#" class="img-load"><img src="images/post-thumb1.png" alt="" /></a> MCMBRAND has launched. We are officially open for business.</a> 
                  <p>June 01, 2010</p> 
                </li> 
 
 
                </li> 
                <li> <a href="" class="img-load"><img src="images/post-thumb3.png" alt="" /></a> <a href=""  target="_blank">Follow us on Twitter</a> 
                  <p>June 01, 2010</p> 
                </li> 
              </ul> 
            </div> 
          </li> 
          <!-- widget END here --> 
          <!-- widget START here --> 
          <li class="widget"> 
            <div class="inside"> 
			<h3><img src="images/welcome4.png" width="" height="" /></h3> 
                  <p>Fill out our project planner by answering as many of our questions as you can and we'll get back to you.
                <span class="author"><a href="">Project Planner</a></span></blockquote></p> 
            </div> 
          </li> 
          <!-- widget END here --> 
        </ul> 
      </div> 
      <!-- sidebar END here --> 
    </div> 
    <!-- container END here --> 
  </div> 
  <!-- content END here --> 
</div> 
<!-- site-wrapper END here --> 
<!-- footer-wrapper START here --> 
<div id="footer-wrapper"> 
  <!-- container START here --> 
  <div class="container"> 
    <!-- footer-widget #1 START here --> 
    <div class="footer-widget one_forth">
    <h3>Pages</h3>
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Our Services</a></li>
    <li><a href-"">Our Work</a></li>
    <li><a href="">Contact Us</a></li>
    </ul>
    </div>
    <!-- footer-widget #1 END here -->
    <!-- footer-widget #2 START here -->
    <div class="footer-widget one_forth">
    <h3>News & Events</h3>
    <ul>
    <li><a href="">June 2010</a></li>
    <li><a href="">July 2010</a></li>
    <li><a href="">August 2010</a></li>
    <li><a href="">Septemeber 2010</a></li>
    </ul>
    </div>
    <!-- footer-widget #2 END here -->
    <!-- footer-widget $3 START here -->
    <div class="footer-widget one_forth">
    <h3>Categories</h3>
    <ul>
    <li><a href="">General</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Portfolio</a></li>
    <li><a href="">Web Design</a></li>
    </ul>
    </div>
    <!--footer-widget #3 END here-->
    <!-- footer-widget #4 START here -->
    <div class="footer-widget one_forth no-margin">
    <h3>All Rights Reserved</h3>
    <p>&copy; 2010 All rights reserved to </p>
    <p>FOLLOW US...</p>
    <ul class="social-links">
    <li><a href="" target="_blank"><img src="images/social/facebook_16.png" alt="Facebook" /></a></li>
    <li><a href="" target="_blank"><img src="images/social/twitter_16.png" alt="Twitter" /></a></li>
    <li></li>
    </ul>
    </div>   
    <!-- footer-widget #3 END here --> 
  </div> 
  <!-- container END here --> 
</div> 
<!-- footer-wrapper END here --> 
<script type="text/javascript"> Cufon.now(); </script> 
</body> 
</html>

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 36 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Tried removing the

Tried removing the padding-bottom:10px from #site-wrapper?

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 7 years 28 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

The only white space I see is

The only white space I see is from the padding-bottom on the site wrapper which confusingly doesn't contain the footer?

comatoseduck
comatoseduck's picture
Offline
Regular
Last seen: 10 years 46 weeks ago
Timezone: GMT-5
Joined: 2010-06-03
Posts: 25
Points: 42

@vade-I did it but it made no

@vade-I did it but it made no change to anything

The other person I am editing the code with fixed most of the pages but now the white space is only on the contact us page (LINK REMOVED) I'm sure it has something to do with the fact that there's not a lot of content on that page...but I still can't figure out how to make it stick to the bottom. I looked into the sticky footers but there so much stuff to wade through I got confused so any help on that?

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 36 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Which method are you using?

Which method are you using? I'd normally point people here.

Just let us know which part is confusing you.

comatoseduck
comatoseduck's picture
Offline
Regular
Last seen: 10 years 46 weeks ago
Timezone: GMT-5
Joined: 2010-06-03
Posts: 25
Points: 42

I guess what's confusing me

I guess what's confusing me is the css part. I already have a a footer style but it's called #footer-wrapper, do I just add the #footer css to that? I also don't have a #wrap or #main anywhere in my css so I'm guessing I would have to figure out what it is that we called it instead and add to that? Ugh I don't like sharing coding with other people it makes life too confusing. Thanks for the patience!

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 36 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

You already have everything

You already have everything set up, and I'm a little worried that you don't think you have a #wrap or #main you've just called them #site-wrapper and #content, incidentally #site-wrapper isn't closed in the code above but I think you already rectified that on the live site which however still has 29 errors.

html, body {height: 100%;}
 
#site-wrapper {min-height: 100%;}
 
#content {overflow:auto;
	padding-bottom: 150px;}  /* must be same height as the footer */
 
#footer-wrapper {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;} 
 
/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}

Obviously you change any heights to suit your needs, so just amend your existing styles to accommodate these and you should be golden. Just remember wrap, header, content, close wrap, footer.

comatoseduck
comatoseduck's picture
Offline
Regular
Last seen: 10 years 46 weeks ago
Timezone: GMT-5
Joined: 2010-06-03
Posts: 25
Points: 42

sweet got it to work, thanks

sweet got it to work, thanks vade for answering my questions. see ya around!

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 36 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Oh no, you aren't getting

Oh no, you aren't getting away till you fix those 31 errors, don't make us send the validation squad round your house!

Validation Squad may just be Cupidstoejam with a heavy stick and threatening gesture.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Oh it won't be CTJ Stick

Oh it won't be CTJ Stare

Stick height:auto on that #site-wrapper please and consider how IE6 is to cope as that needs further help - full viewport height is slightly tricky.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 11 years 36 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

Ok we'll all go Hugo, but the

Ok we'll all go Hugo, but the barbed wire was a bit much last time.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I'll leave the barbed wire

I'll leave the barbed wire behind then Sad(

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

comatoseduck
comatoseduck's picture
Offline
Regular
Last seen: 10 years 46 weeks ago
Timezone: GMT-5
Joined: 2010-06-03
Posts: 25
Points: 42

promise i will validate

promise i will validate everything before i hang up my hat on this one, scouts honour