Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page How to get footer at the bottom of the screen

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 11-26-2012, 04:16 PM   PM User | #1
gazaian1
New Coder

 
Join Date: Aug 2011
Posts: 52
Thanks: 24
Thanked 0 Times in 0 Posts
gazaian1 is an unknown quantity at this point
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;
}
gazaian1 is offline   Reply With Quote
Old 11-26-2012, 09:08 PM   PM User | #2
fgatlin
New to the CF scene

 
Join Date: Nov 2012
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
fgatlin is an unknown quantity at this point
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 09:22 PM..
fgatlin is offline   Reply With Quote
Old 11-26-2012, 09:49 PM   PM User | #3
gazaian1
New Coder

 
Join Date: Aug 2011
Posts: 52
Thanks: 24
Thanked 0 Times in 0 Posts
gazaian1 is an unknown quantity at this point
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.
gazaian1 is offline   Reply With Quote
Old 11-26-2012, 11:18 PM   PM User | #4
LearningCoder
Regular Coder

 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: The Pleiades
Posts: 849
Thanks: 67
Thanked 28 Times in 28 Posts
LearningCoder is an unknown quantity at this point
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.
LearningCoder is offline   Reply With Quote
Old 11-26-2012, 11:27 PM   PM User | #5
LearningCoder
Regular Coder

 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: The Pleiades
Posts: 849
Thanks: 67
Thanked 28 Times in 28 Posts
LearningCoder is an unknown quantity at this point
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 12:50 AM..
LearningCoder is offline   Reply With Quote
Old 11-27-2012, 12:21 AM   PM User | #6
sniperkill
New to the CF scene

 
Join Date: Nov 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
sniperkill is an unknown quantity at this point
how about adding margin-top:xxpx; ?
sniperkill is offline   Reply With Quote
Reply

Bookmarks

Tags
css, html, wordpress

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 07:52 AM.
Advertisement
Log in to turn off these ads.