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 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    52
    Thanks
    24
    Thanked 0 Times in 0 Posts

    How to get footer at the bottom of the screen

    I have gotten the footer under the container but it leaves a huge gap under it.
    you can view here: http://www.separatethescams.com/newdesign/

    Any help appreciated thanks.

    Code:
    @charset "utf-8";
    *{
       margin:0;
    }
    header, article, section, aside, hgroup{display:block;}
    
    html, body {border: 0; margin: 0; padding: 0; text-align: center; height:100%;}
    
    body{
    	background: #ececec url(../images/bg4.png)  no-repeat center center fixed;
      	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    
    a {
    	color: #0099CC;
    	text-decoration: none;
    }
    
    a:hover {
    	color: #156388;
    }
    
    p {
    	padding-bottom: 12px;
    }
    
    a img {
      border: none;/*remove border for linked images*/
    }
    
    h1 {
    	font-size: 1.6em;
    	height: 20px;
    	padding-top: 0;
    }
    
    h2{
    	font-size: 1.2em;
    	height: 20px;
    	padding-top: 0;
    }
    
    /***** Main Layout ****/
    #Container {
        min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -422px;
      	width:975px;
    }
    header{
        float:left;
    	width:100%;
    	height:340px;
    }
    #logo{
        float:left;
    	margin:20px 0 0 -18px;
    	padding:0;
    	width:250px;
    	height:250px;
    }
    #headerAd{
        float:right;
        width:728px;
    	height:90px;
    	background-color:#666666;
    	margin:60px 10px 0 0;
    	padding:0;
    }
    #search{
        float:right;
    }
    /********************************************
    Navigation Area
    ********************************************/
    #menuwrap{
        float:left;
    	margin:0;
    	padding:0;
        width:100%;
    	background-color:#116f92;
    	height:70px;
    }
    nav{
    	padding:0;
    	margin:9px 0 0 0;
        width:100%;
    	height:53px;
    	background:#189ecb;
    }
    nav ul{
    	margin:0;
    	padding:0;
    	line-height:49px;
    }
    nav ul li{
        margin:0;
    	padding:0;
        list-style:none;
    	float:left;
    	height:49px;
    	margin:2px 0 0 0;
    	position:relative;
    	border-left: 1px solid #116f92;
        border-right: 1px solid #116f92;
    }
    nav ul li a{
        text-align:center;
    	font-family:'Nobile', Helvetica, Arial, sans-serif;
    	font-size:18px;
    	text-decoration:none;
    	height:53px;
    	width:162.5px;
    	color:#ffffff;
    	display:block;
    }
    nav li.menu-item-71 a{
    	width:160.6px !important;
    }
    nav li.menu-item-71{
        border-left:none;
    	width:160.6px !important;
    }
    nav li.menu-item-65{
        border-right:none;
    }
    
    #menu-item-65 a{
        width:154px;
    }
    
    nav ul ul{
        position:absolute;
    	visibility:hidden;
    	top:53px;
    	z-index:25;
    }
    nav ul li:hover ul{
        visibility:visible;
    }
    /*************************************************/
    
    nav a:hover{
        margin:0 0 0 0;
        background-color:#156388;
    	color:#06A4DC !important;
    	height:49px;
    	width:162.5px;
    	line-height:49px;
    }
    nav li.menu-item-71 a:hover{
        margin:0 0 0 0;
        background-color:#156388;
    	color:#06A4DC !important;
    	height:49px;
    	width:160.6px !important;
    	line-height:49px;
    }
    
    nav ul li ul{
        background-color:#DAD6D3;
    	border-bottom-left-radius:8px;
    	border-bottom-right-radius:8px;
    	margin:-4px 0 0 0 !important;
    }
    nav ul li ul li a{
    	color:#ffffff;
    	height:55px !important;
    }
    nav ul li ul li{
        border-left:none;
    	border-right:none;
    }
    #menu-item-65 ul li{
        width:154px !important;
    }
    #menu-item-65 ul li a{
        width:154px !important;
    }
    #menu-item-65{
        width:154px !important;
    }
    #menu-item-65{
        width:154px !important;
    }
    .dividerm{
    	background-color: #ccc;
    	height: 1px;
    	width: 170px;
    }
    .dividermm{
    	background-color: #ececec;
    	height: 1px;
    	width: 170px;
    	margin:1px 0 0 0;
    }
    nav ul li.menu-item-72, .menu-item-73, .menu-item-74, .menu-item-75:hover ul li a:hover{
        background-color:#C2C1BD  !important;
    	color:#fff !important;
    }
    .menu-item-75 a:hover{
    	margin:-2px 0 0 0 !important;
    	border-bottom-left-radius:8px;
    	border-bottom-right-radius:8px;
    }
    #toggle,#open.open,#close.close{
       font-family:"arial", helvetica, sans-serif;
       font-size:12px !important;
    }
    /**********************************************
    Main Content Area
    **********************************************/
    article {
        display:inline-block;
    	margin:0 auto;
      	width: 975px;
    	padding:3px 0 0 0;
    	text-align:left;
    	background-color:#37A1C3;
    }
    /*********************************************
    Latest Articles Section
    *********************************************/
    #postarea{
        display:inline-block;
        background-color:#F6F6F6;
    	width:635px;
    	height:280px;
    }
    #postAd{
        display:inline-block;
        background-color:#000;
    	width:336px;
    	height:280px;
    }
    #latestarticles{
        float:left;
        width:635px;
    	height:45px;
    	padding:0;
    	background-color:#B50800;
    }
    #latestarticles h1{
        display:inline-block;
        margin:0 0 0 8px;
    	Color:#ECBC08;
    	line-height:45px;
    }
    #slidingpost{
        display:inline-block;
    	width:635px;
    	height:235px;
    	margin:0 auto;
    	padding:0;
    }
    #contentarea{
        float:left;
    	background-color:#F6F6F6;
    	width:635px;
    	margin:0 0 5px 0;
    	font-family:'Helvetica', Arial, sans-serif !important;
    }
    .contenttitle{
        float:left;
        width:635px;
    	height:45px;
    	padding:0;
    	background-color:#B50800;
    }
    .contenttitle h1{
        display:inline-block;
        margin:0 0 0 8px;
    	Color:#ECBC08;
    	line-height:45px;
    }
    .realcontent{
        display:inline-block;
        width:625px !important;
    	margin:5px 8px 0 8px;
    	font-size:16px;
    }
    .realcontent p{
        display:inline-block;
    	margin:5px 0 0 0;
    	text-align:left;
    }
    #mainsidebar{
        float:right;
    	width:336px;
    	margin:0 0 5px 0;
    }
    #sidebararea{
        float:right;
    	background-color:#ECBC08;
    	width:336px;
    	text-align:left;
    	margin:0 0 0 0;
    }
    #sidebararea1{
        float:right;
    	background-color:#ECBC08;
    	width:336px;
    	text-align:left;
    	margin:0 0 0 0;
    	border-bottom:2px solid #ffffff;
    }
    #sidebararea2{
        float:right;
    	background-color:#ECBC08;
    	width:336px;
    	text-align:left;
    	margin:0 0 0 0;
    	border-bottom:2px solid #ffffff;
    }
    .sidetitle{
        float:left;
        width:336px;
    	height:45px;
    	padding:0;
    	background-color:#B50800;
    }
    .sidetitle h1{
        display:inline-block;
        margin:0 0 0 8px;
    	Color:#ECBC08;
    	line-height:45px;
    }
    .sidecontent{
        display:inline-block;
        width:336px;
    	height:100%;
    	margin:0 auto;
    }
    .sidecontent li{
        list-style:none;
        font-family:'Nobile', Helvetica, Arial, sans-serif !important;
    	font-size:16px;
    	font-weight:bold;
    	color:#ffffff !important;
    	height:53px;
    	border-bottom:2px solid #ffffff;
    }
    .sidecontent li a{
    	color:#ffffff !important;
    	margin: 0 0 0 8px;
    	line-height:53px;
    }
    .sidecontent li a:hover{
    	color:#000000 !important;
    }
    #ny_subscribe_wrapper{
       margin:0 auto !important;
       width:300px;
    }
    #ny_subscribe_wrapper p{
         font-family:'Nobile', Helvetica, Arial, sans-serif !important;
    	 font-size:16px !important;
    	 margin:0 0 0 1px;
    }
    #ny_subscribe_form input{
       background-color: rgba(255, 255, 255, 0.4); 
       border: 5px solid #ECBC08; 
       padding: 10px; 
       font-family:'Nobile', Helvetica, Arial, sans-serif !important;
       color: #4b4b4b; 
       font-size: 24px; 
       -webkit-border-radius: 5px; 
       margin-bottom: 15px; 
       margin-top: -10px;
    }
    
    #ny_subscribe_form 	input[type="submit"] {
       margin:0 0 0 4px;
       border: none; 
       cursor: pointer; 
       color: #B50800; 
       font-size: 24px; 
       background-color: #ECBC08; 
       padding: 5px 36px 8px 36px; 
       -webkit-border-radius: 10px; 
       -moz-border-radius: 10px; 
       -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
       -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); 
       border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
       border-top: 1px solid rgba(255, 255, 255, 0.6);
       background: -webkit-gradient(
    	linear,
    	left bottom,
    	left top,
    	color-stop(0.23, #ECBC08),
    	color-stop(0.62, #ECBC08)
    		);
    	background: -moz-linear-gradient(
    	center bottom,
    	#ECBC08 23%,
    	#ECBC08 62%
    	);
    
    }
    #ny_subscribe_form input[type="submit"]:hover { 
    	color: #ECBC08; 
    	border-bottom: 1px solid rgba(0, 0, 0, 0.4); 
    	background-color: #ff5400;
    	background: -webkit-gradient(
    	linear,
    	left bottom,
    	left top,
    	color-stop(0.23, #B50800),
    	color-stop(0.62, #B50800)
    	);
    	background: -moz-linear-gradient(
    	center bottom,
    		#B50800 23%,
    		#B50800 62%
    	);
    }
    input[type="submit"]:active { top: 1px; }
    
    /****************************************
    Footer Area
    ****************************************/
    footer{
        margin:0 auto;
    	background-color:#17404E;
    	text-align:center;
    	font-family:'Nobile', Helvetica, Arial, sans-serif;
    	color:#ffffff;
    	height:422px;
    	width:975px;
    }
    footer, .push{
        height:422px;
        clear: both;
    }
    #footerleft{
        float:left;
    	width:325px;
    	/*background-color:#ECBC08;*/
    	text-align:left;
    }
    .footertitle{
        font-family:'Nobile', Helvetica, Arial, sans-serif;
    	font-size:21px;
    }
    #lefttitle{
        background-color:#B50800;
    	padding:5px 0 0 0;
    	width:325px;
    	height:35px;
    	text-align:center;
    }
    #footermiddle{
        float:left;
    	width:325px;
    	/*background-color:#528C8C;*/
    	text-align:left;
    }
    #middletitle{
        background-color:#E29213;
    	padding:5px 0 0 0;
    	width:325px;
    	height:35px;
    	text-align:center;
    }
    #footerright{
        float:left;
    	width:325px;
    	/*background-color:#B50800;*/
    	text-align:left;
    }
    #righttitle{
        background-color:#17404E;
    	padding:5px 0 0 0;
    	width:325px;
    	height:35px;
    	text-align:center;
    }
    #copyright{
        display:inline-block;
    	font-size:14px;
    	font-weight:bold;
    }
    #copyright a{
        color:#B50800;
    }
    #fmiddle{
    
    }
    /*Search Styling*/
    
    #search {
    
    	background: #ECECEC;
    
    	background-image: -moz-linear-gradient(#fff, #ececec);
    
    	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ececec),color-stop(1, #fff));
    
    	-moz-border-radius: 35px;
    
    	border-radius: 35px;
    
    	
    
    	border-width: 1px;
    
    	border-style: solid;
    
    	border-color: #e7f7ff #fff #e7f7ff;            
    
    	width: 400px;
    
    	height: 35px;
    
    	padding: 10px;
    
    	margin: 25px 10px 0 0px;
    
    	overflow: hidden; /* Clear floats */
    
    
    
    }
    
    .screen-reader-text{
    
    display: none;
    
    }
    
    #s {
    
    padding: 5px 9px;
    
    	height: 23px;
    
    	width: 280px;
    
    	border: 1px solid #a4c3ca;
    
    	font: normal 13px 'trebuchet MS', arial, helvetica;
    
    	background: #f1f1f1;
    
    	float: left;
    
    	-moz-border-radius: 50px 3px 3px 50px;
    
    	 border-radius: 50px 3px 3px 50px;
    
    	 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
    
    	 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
    
    	 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);            
    
    
    
    }
    
    #searchsubmit {
    
        background: #528C8C;
    
    	background-image: -moz-linear-gradient(#528C8C, #0099CC);
    
    	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #528C8C),color-stop(1, #0099CC));
    
    	-moz-border-radius: 3px 50px 50px 3px;
    
    	border-radius: 3px 50px 50px 3px;
    
    	border-width: 1px;
    
    	border-style: solid;
    
    	border-color: #528C8C;
    
    	 -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    
    	 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    
    	 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   		
    
    	height: 35px;
    
    	margin: 0 0 0 -10px;
    
        padding: 0;
    
    	width: 90px;
    
    	cursor: pointer;
    
    	font: bold 14px Arial, Helvetica;
    
    	color: #003F5F;
    
    	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    }
    /*Contact form 7*/
    .textwidget input {
    width: 270px;
    height:28px;
    }
    .textwidget textarea {
    width: 270px;
    height:100px;
    }
    .textwidget input[type=submit] {
        background: #528C8C;
    	background-image: -moz-linear-gradient(#528C8C, #0099CC);
    	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #528C8C),color-stop(1, #0099CC));
    	-moz-border-radius: 50px 50px 50px 50px;
    	border-radius: 50px 50px 50px 50px;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #528C8C;
    	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   		
    	height: 35px;
    	margin: 0 0 0 0px;
        padding: 0;
    	width: 110px;
    	cursor: pointer;
    	font: bold 14px Arial, Helvetica;
    	color: #003F5F;
    	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    }
    
    /*post styling*/
    .post-excerpt a{
         display:block;
    	margin:18px 0 0 -7px;
    }

  • #2
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not sure which gap you are referring to. The one in light blue or under the footer text?
    Last edited by fgatlin; 11-26-2012 at 10:22 PM.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    52
    Thanks
    24
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by fgatlin View Post
    Not sure which gap you are referring to. The one in light blue or under the footer text?
    The gap under the footer on the homepage or any page that does not have lengthy content.

  • #4
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    Not quite sure, but try deleting the -422px:

    Code:
    #Container {
        min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -422px;
      	width:975px;
    }
    Not sure if it will work, but it's worth a try.

    Regards,

    LC.

  • #5
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    925
    Thanks
    76
    Thanked 29 Times in 29 Posts
    That's a wild guess btw.

    didn't have firebug at that moment, but just installed and judging by what it's showing me, I think it's something to do with your height declarations on your #container div.

    Regards,

    LC.
    Last edited by LearningCoder; 11-27-2012 at 01:50 AM.

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how about adding margin-top:xxpx; ?


  •  

    Tags for this Thread

    Posting Permissions

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