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
    Jun 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    footer sits a distance after the main content

    The footer div "footercontainer" sits a distance after the maincontainer div (white space) and I don't know why.

    Below is the XHTML and CSS:

    XHTML:
    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" xml:lang="en" lang="en">
    <head>
    <link rel="stylesheet" type="text/css" href="styles/main.css"/>
    <link rel="stylesheet" type="text/css" title="CSS Stylesheet" href="styles/dropdown.css" />
    <script type="text/javascript" src="javascript/dropdown.js"></script>
    <script type="text/javascript">
    var menu;
    function configMenu() {
      this.closeDelayTime = 300
      // this.collapseBorders = false;
    }
    function initMenu() {
    
      menu = new Menu('menu-root', 'menu', configMenu);
    }
    onload = initMenu;
    </script>    
    
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
    <div class="headercontainer">
    <a name="top"></a>
    	<div class="expandableheader">
    
    	</div>
    	
    	<div class="staticheader">
    		<div class="leftheadercontent">
    	<img src="images/stilleto.png" alt="corporate logo" class="stilleto"/>
    	<a href="index.htm" class="indexlink">Creative Web Concepts</a>
    	</div>
    	<div class="menucontainer">
    	<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a class="MenuBarItemSubmenu" href="index.html" accesskey="h"><b>Home</b></a>
        <ul>
          <li><a href="index.html" accesskey="h"><b>Services</b></a>
          	<ul>
              <li><a href="swebsite.html" target="_blank" accesskey="8">Web Site</a></li>
    
              <li><a href="sredesignws.html" target="_blank" accesskey="9">Redesign Web Site</a></li>
              <li><a href="scontman.html" target="_blank" accesskey="10">Content Management System</a></li>
              <li><a href="slogo.html" target="_blank" accesskey="11">Logo</a></li>
              <li><a href="secomm.html" target="_blank" accesskey="12">eCommerce</a></li>
              <li><a href="sseo.html" target="_blank" accesskey="13">SEO (Search Engine)</a></li>
              <li><a href="sflash.html" target="_blank" accesskey="14">Flash</a></li>
    
              <li><a href="sprint.html" target="_blank" accesskey="15">Print</a></li>
              <li><a href="sphotog.html" target="_blank" accesskey="16">Photography</a></li>
              <li><a href="sbusinesc.html" target="_blank" accesskey="17">Business Cards</a></li>
              <li><a href="sbroch.html" target="_blank" accesskey="18">Domain & Hosting</a></li>
              <li><a href="ssecret.html" target="_blank" accesskey="19">Secretarial</a></li>
    
            </ul>
          </li>  
          <li><a href="testimon.html" target="_blank" accesskey="20">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="portfolio1.html" accesskey="1"><b>Portfolio</b></a>
      	<ul>
          <li><a href="portfolio1.html" accesskey="1">Portfolio Examples</a>
    
          	<ul>
           	  <li><a href="pwebsite.html" target="_blank" accesskey="21">Web Site</a></li>
              <li><a href="predesignws.html" target="_blank" accesskey="22">Redesign Web Site</a></li>
              <li><a href="pcontman.html" target="_blank" accesskey="23">Content Management System</a></li>
              <li><a href="plogo.html" target="_blank" accesskey="24">Logo</a></li>
              <li><a href="pecomm.html" target="_blank" accesskey="25">eCommerce</a></li>
    
              <li><a href="pflash.html" target="_blank" accesskey="27">Flash</a></li>
              <li><a href="pprint.html" target="_blank" accesskey="28">Print</a></li>
              <li><a href="pphotog.html" target="_blank" accesskey="29">Photography</a></li>
              <li><a href="pbusinesc.html" target="_blank" accesskey="30">Business Cards</a></li>
            </ul>
         </li>
         </ul>
    
       </li>
      	<li><a class="MenuBarItemSubmenu" href="about.html" accesskey="2"><b>About</b></a>
          <ul>
          <li><a href="about.html" accesskey="2">Background</a></li>
          <li><a href="about.html" accesskey="2">Experience</a></li>
          <li><a href="about2.html" accesskey="33">Thankyous</a></li>
          <li><a href="about2.html" accesskey="33">Acknowledge</a></li>
    
        </ul>
      </li>
      <li><a href="inspirations1.html" accesskey="3"><b>Inspirations</b></a>
      <ul>
          <li><a href="inspirations1.html" accesskey="3">References</a></li>
          <li><a href="inspirations1.html" accesskey="3">Affiliations</a></li>
          <li><a href="inspirations2.html" accesskey="34">Visit Places</a></li>
    
          <li><a href="inspirations2.html" accesskey="34">Go To Events</a></li>
          <li><a href="inspirations3.html" accesskey="35">Free Tools</a></li>
        </ul>
      </li>
      <li><a href="http://creativewebconcepts.com.au/blog/" target="_blank" accesskey="4"><b>Creative Blog</b></a>
      </li><li><a href="contact.html" accesskey="5"><b>Contact</b></a>
    
      </li><li><a href="http://webdchat.wordpress.com/" target="_blank" accesskey="6">Webdchat Blog</a>
    </li></ul>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    	</div>
    
    </div>
    <div class="maincontainer">
    	<div class="leftmaincontent">
    	</div>
    	<div class="rightmaincontent">
    	</div>
    </div>
    
    
    <div class="footercontainer">
    
    	<div class="expandablefooter">
    	</div>
    	
    	<div class="staticfooter">
    	<div class="footercontent">
    	<a href="#top" class="backtotoplink"><span class="backtop">Back to the top</span></a>
    
    <a href="index.html" accesskey="h" class="bottomlink">Home |</a>
    <a href="portfolio1.html" accesskey="1" class="bottomlink">Portfolio |</a>
    <a href="about.html" accesskey="2" class="bottomlink">About |</a>
    
    <a href="inspirations1.html" accesskey="3" class="bottomlink">Inspirations |</a>
    <a href="http://creativewebconcepts.com.au/blog/" target="_blank" accesskey="4" class="bottomlink">Creative Websites Blog |</a>
    <a href="contact.html" accesskey="5" class="bottomlink">Contact |</a>
    <a href="http://webdchat.wordpress.com/" target="_blank" accesskey="6" class="bottomlink">Webdchat Blog |</a>
    <a href="sitemap.html" accesskey="7" class="bottomlink">Site Map</a> 
    <a href="access.html" accesskey="k" class="bottomlink"></a>
    
    <div id="contactfooter"><p>Contact Now on -</p>
    <p>Mobile:  or</p>
    <a href="contact.html" target="_blank" accesskey="5" class="bottomlink">Click here to Email me</a></div>
    </div>
    
    
    
    	</div>
    
    </div>
    
    </body>
    </html>


    CSS:
    Code:
    * {
    margin:0;
    
    }
    
    body {
    background:url("../images/background-gradient.png") #ffffff repeat-x;
    
    }
    
    
    .headercontainer{
    height:100%;
    width:100%;
    
    }
    
    .maincontainer{
    background-color:#ffffff;
    width:950px;
    height:1700px;
    border:outset;
    border-top:none;
    border-bottom:none;
    margin-left:auto;
    margin-right:auto;
    z-index:0;
    position:relative;
    
    }
    
    .menucontainer{
    height:100%;
    width:100%;
    z-index:4;
    position:relative;
    top:90px;
    
    }
    
    
    .expandableheader{
    background:url(../images/repeat_headerGrey3.png);
    height:168px;
    width:100%;
    z-index:1;
    
    }
    
    
    .leftheadercontent{
    float:left;
    position:relative;
    right:100px;
    
    }
    
    .staticheader {
    background: url(../images/headerGrey3.png);
    width:942px;
    height:168px;
    float:right;
    z-index:2;
    position:relative;
    bottom:168px;
    
    }
    
    .leftmaincontent{
    width:33%;
    height:80%;
    border:outset;
    float:left;
    
    }
    
    .rightmaincontent{
    width:65%;
    height:80%;
    border:outset;
    float:right;
    
    }
    
    
    
    
    .footercontainer{
    height:105px;
    width:100%;
    position:relative;
    
    }
    
    
    .expandablefooter{
    z-index:1;
    background:url(../images/repeat_footerGrey.png);
    height:105px;
    width:100%;
    position:relative;
    top:105px;
    
    }
    
    .staticfooter{
    z-index:2;
    background:url(../images/footerGrey.png);
    width:941px;
    height:105px;
    float:right;
    position:relative;
    
    }
    
    .footercontent{
    position:relative;
    left:70px;
    }
    
    .backtotoplink{
    color:#FF3;
    
    }
    
    a.backtotoplink{
    color:#ffffff;
    
    }
    
    a:visited.backtotoplink{
    color:#ffffff;
    
    }
    
    
    a.bottomlink{
    color:#FF3;
    
    }
    
    a:visited.bottomlink{
    color:#FF3;
    
    }
    
    .indexlink{
    color:#ff3;
    font-weight:bold;
    text-decoration:underline;
    position:relative;
    bottom:50px;
    right:40px;
    
    }
    
    a.indexlink{
    color:#ff3;
    
    }
    
    a:visited.indexlink{
    color:#ff3;
    
    }
    
    img.stilleto{
    padding:20px;
    }
    
    #contactfooter p{
    color:#ffffff;
    font-weight:bold;
    position:relative;
    top:10px;
    }
    
    #contactfooter a{
    position:relative;
    top:10px;
    }
    Last edited by _chris; 06-11-2010 at 09:22 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Clear the floats instead of setting heights on the divs. I'd recommend you to check http://bonrouge.com/2c-hf-fullyfluid.php or http://bonrouge.com/2c-hf-fluid.php to see how to make good 2 column layouts.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    _chris (06-12-2010)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very much, I have been stuck on this.


  •  

    Posting Permissions

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