...

View Full Version : How to get footer at the bottom of the screen



gazaian1
11-26-2012, 05:16 PM
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.



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

fgatlin
11-26-2012, 10:08 PM
Not sure which gap you are referring to. The one in light blue or under the footer text?

gazaian1
11-26-2012, 10:49 PM
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.

LearningCoder
11-27-2012, 12:18 AM
Not quite sure, but try deleting the -422px:


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

LearningCoder
11-27-2012, 12:27 AM
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.

sniperkill
11-27-2012, 01:21 AM
how about adding margin-top:xxpx; ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum