CSS - Running The Bottom Of The Page Off The Page

i tried searching for this and wasn't able to find any threads.

i have a container div with my content, and then i have a footer div that i want to always be at the bottom of the page. i've got it to work in FireFox, but IE is a pain as usual. can anyone look at this and tell me if i'm doing it right and/or what i'm doing wrong? thx.

css
Code:

#container {min-height: 87%; width:620px; margin: 30px auto; position:relative; text-align: center; clear: both; background-image: url(images/backgroundCol.gif); background-repeat: repeat-y;}

#container_footer { margin:auto; height:50px; width:620px; text-align:center; background:#FF0000; clear:both; position:relative; margin-top: -80px; clear: both; background-image: url(images/footerBackground.gif); background-repeat: repeat-y;}

html
Code:

<div id="container">
container
<br class="clearall" />
</div>

<div id="container_footer">		
			this is the footer		
	<br class="clearall" />
</div>

here is the page in action so far
http://www.photography139.com/index.html

Hi all,

I am in the early stages of developing a new website and really cant understand why there is a space between the browser window and the container div.

Here is the code I have used:

html, body {
padding: 0;
margin: 0;
background-color: #D3D3D3;
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 14px;
color: #000000;
}

#page-container {
margin-top: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
background-image:url('back.jpg');
background-repeat:repeat-y;
text-align: center;
width: 800px;
}

I have tried all sorts of variations but nothing will get the page-contaner div to go flush with the top and bottom of the browser window! (I have used this code many times before and it always works, even sites I have stored locally on my machine using this look fine?!?!?)

Any help would be greatly appreciated!

Rich

Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page.

my site
stylesheet (see div#footer)

Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work.

Hi

I'm trying to set an element at the bottom of the page, but I'm having a little bit of problems with this.

I have to following element
Code:

<style>
#footer {
	height: 30px;
	border-top: solid 1px #000000;
	background-color: #eeeeee;
}

</style>


<div id="footer">
	Hello world
</div>

This element should be at the bottom of the page - always. Let's say that the page content's height is 100px. The footer should be placed at the bottom of the page, just above the status bar in the browser.
If the page content is longer than the screen resolution (in other words, you'll have to scroll), then the footer will again be placed at the bottom of the page, BUT it will not be visible untill you scroll down - in other words, it's not a layer that is floating above the status bar.

Do you have any ideas how this could be done?
I tried position: relative; bottom: 30px; but that only placed the footer 30px from the bottom of the content. So if the content ended at 100px, then the footer started at 70px.
Can this be done with css or do I have to use javascript?

- Kimppa

Hello

Trying to position an image at the bottom of my webpage which:

a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for)
b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do)
c) I can layer divs on top of

so far this is as close as I've got:

in the html

<!-- container for site info -->
<div id="container">

<!-- other content in divs here -->

<!-- other content in divs here -->

<!-- footer for bottom image -->
<div id="footer">

<!-- footer details, who / when / copyright -->
<div id="footerdetails">
details here
</div>
<!-- footer details, who / when / copyright -->

</div>
<!-- footer for bottom image -->

</div>

and in the css

#container
{
position: absolute;
top: 0px;
width: 750px;
height: 100%;
}

#footer
{
position: absolute;
bottom: 0px;
height: 230px;
width: 750px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

#footerdetails
{
position: relative;
margin: 0px 0px 0px 0px;
padding: 9px 0px 10px 70px;
top: 195px;
width: 680px;
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
}

I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this?

Thanks in advnace.

a+
gar

I am testing a three column layout with a header and a footer using only CSS. Ordinarily it works fine but when the center column has less height than the left or right columns (due to amount of content in each) then the footer overlaps the left or right column as it positions itself to just below the center column.

Can anyone figure out why? I am baffled since the footer has an absolute position of left: 0px and bottom: 0px;

Here is my HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title</title>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	height: 100%;
}
.left-col { 
	position: absolute; 
	width: 150px;
	top: 130px; 
	left: 0px;
	padding-left: 3px;
	z-index: 2;
}

.right-col {	
	position: absolute; 
	width: 150px;
	top: 120px;
	right: 0;
	padding-right: 3px;	
	z-index: 1;
	overflow: hidden;
	clear: both;
}

.center-col {
	position: relative;
	min-width: 300px;
	min-height: 100%;
	height: 100%;
	z-index: 3;
	top: 140px;
	margin: 0px 160px 150px 170px;
	text-align: left;
	padding:5px;
}

.heading { 
	position: absolute;
	left: 0px;
	top: 0px;
}

.footer {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	z-index: 3;
	padding-top: 25px;
	margin: 0px;
	display: block;
}

.footer-bar {
	width: auto;
	padding:10px 3px 3px 0px;
	clear: both;
	background-color: gray;
	vertical-align: bottom;
	text-align: center;
}
</style>
</head>
<body>
<div class="center-col">
	center content<br />
	center content<br />
	center content<br />
	center content<br />
</div>

<div class="left-col">
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
	left content<br /><br />
</div>

<div class="right-col">
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
	right content<br /><br />
</div>

<div class="heading">
	head content
</div>

<div class="footer">
	<div class="footer-bar">page bottom</div>
</div>
</body>
</html>

Hello everyone

I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6

Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE.

The style sheet is no from me.

I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input

Eva

Here it is:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png);
background-repeat: no-repeat;
background-position: left top;
font: 13px Verdana, Arial, Helvetica, sans-serif;
/* size: 100%; */
color: #333333;
line-height: 1.3;
margin: 0px;
padding: 0px;
}


img{
border: 0;
}

a{
color: #006699;
text-decoration: none;
}

a:link{
color: #006699;
text-decoration: none;
}

a:visited{
color: #006699;
text-decoration: none;
}

a:hover{
color: #006699;
text-decoration: underline;
font-weight: bold;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 114%;
color: black;
margin: 0px;
padding: 0px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h3{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: black;
margin: 0px;
padding: 0px;
}

h4{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
font-weight: normal;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

table{
padding: 5 px;
}

/***********************************************/
/* Layout Divs */
/***********************************************/

#masterhead{
padding: 30px 0px 0px 0px;
/* border-bottom: 1px solid #cccccc; */
width: 950px;
}

#navBar{
float: left;
width: 195px;
margin: 0px;
/* 19.08.2008 padding-top: -5px;*/
padding-top: -5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
/* background-color: #e4f2f9; */
/* 19.08.2008 border-right: 1px solid #cccccc; */
}

#headlines{
position: absolute;
left: 690px;
top: 135px;
font-size: 85%!important;
/* font-size: 90%; */
/* float:right; */
width: 230px;
margin-top: -30px;
/* border-left: 1px solid #cccccc; */
/* border-bottom: 1px solid #cccccc;*/
/* padding-right: 10px; */
}

#headlines h3{
margin-top: 3px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
font-weight: 900;
}

#content{
float: left;
padding-left: 24px;
width: 460px;
font-size: 107%;
line-height: 1.4;
/* position: absolute;
top: 184px;
left: 210px; */
}

#content h1,h2 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 130%;
font-color: black;
}

#content h3 {
margin: 0px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 0px;
font-size: 120%;
font-height: 90%;
font-weight: 900;
}


/***********************************************/
/* Components */
/***********************************************/

#siteName{
margin: 0;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 200px;
/* font-size: x-large; */
color: #FF9900;
}


/************* #globalNav styles **************/

#globalNav{
/* border-bottom: 1px solid #CCC; */
color: #006699;
text-align: center;
/* font-weight: bold; */
margin-top: 40px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 10px;
/* 19.08.2008 border-top: 1px solid #cccccc; */
}

#globalNav img{
display: block;
}

#globalNav a {
/* font-size: 120%; */
padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

/*
#pageName{
margin: 0px;
padding-top: 30px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
*/

/************* #breadCrumb styles *************/

#breadCrumb{
font-size: 80%;
padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
padding: 2px 2px 10px 10px;
font-size: 80%;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
color: #006699;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
clear: both;
font-size: 80%;
padding-top: -40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

.story p{
padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
font-size: 75%;
color: #cccccc;
padding: 10px 10px 10px 10px;
text-align: right;
border-top: 0px none #cccccc;
/* border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc; */

}

#siteInfo img{
padding: 4px 4px 4px 10px;
vertical-align: middle;
}


/************* #search styles ***************/

#search{
padding: 5px 0px 5px 10px;
border-bottom: 1px solid #cccccc;
font-size: 90%;
}

#search form{
margin: 0px;
padding: 0px;
}

#search label{
display: block;
margin: 0px;
padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #EEE;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
position: relative;
margin: 0px;
padding: 0px;
/* border-bottom: 1px solid #006699; */
font-size: 90%;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
}

#sectionLinks a {
display: block;
/* border-top: 1px solid #006699; */
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
/* background-color: #dddddd;*/
}


.navigate {
overflow: hidden;
width: 204px;
padding-bottom: 1px;
}

/**Navigation Menu **/
.navigate ul, .navigate li {
list-style: none;
margin: 0px 0px!important;
padding: 0px 0px!important;
line-height: 1.5em;
}


/**erste Navigationseben**/
.navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
display: block;
border: 0;
border-bottom: 1px solid #86c2e3;
border-top: 1px solid #fff;
border-right: 1px solid #86c2e3;
width: 100%;
text-decoration: none;
margin: 0;
padding: 5px 5px 5px 15px;
font-size: 1.0em;
font-weight: bold;
}

.navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active {
width: auto;
}

.navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px;
padding: 5px 5px 5px 15px;
color: #000;
font-weight: bold;
}

.navigate li a:hover, .navigate li a:focus, .navigate li a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px;
}

.navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}

.navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active {
background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
color: #000;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
position: relative;
margin: 0px;
padding: 0px 0px 10px 10px;
font-size: 90%;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
display: block;
}

/************** #advert styles **************/

#advert{
padding: 30px 0px 10px;
}

#advert img{
display: block;
}


/************** #headlines styles **************/

#headlines{
margin: 0px;
padding: 10px 0px 20px 10px;
}

#headlines p{
padding: 5px 0px 5px 0px;
}

/**Footer**/
#footer {
clear: both;
position: relative;
border-top: 4px solid #CCECF4;
font-size: 11px;
padding: 4px 4px 8px 10px;
margin-top: 4px;
bottom:0;
zoom: 1;
}

#footer .left {
float: left;
width: 700px;
bottom:0;
}

#footer .right {
float: right;
width: 150px;
text-align: right;
margin-top: -2.3em;
zoom: 1;
position: relative;
z-index: 0;
bottom:0;
}

#footer p {
color: #000 !important;
padding: 0;
margin: 0;
bottom:0;
}

#footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active {
color: #306479;
text-decoration: none;
font-weight: bold;
}

#footer a:hover, #footer a:focus {
text-decoration: underline;
}


#navispalte {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 202px;
float: left;
}

I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space.

Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default?

Thanks for any help.

I can't seem to work out where the huge space at the bottom of the pages are coming from.

This is the test page
http://midnighttempest.com/layouttest.html

as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off.
Anyone help?

Greetings,

My example page is located here.

As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher.

I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements?

Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page.

Thanks in advance for any assistance!

ok basically this is an accessibility thing, i dont want users (disabled) to read the links first page after page and i have read that i can place the links at the bottom but style them with css so they appear on top.

i am trying to do something like this but my page just gets messed up if i move the links to below.
page layout:
Code:

<div> //overall
   <div>//top>
   <div>side Links/menu
   <div>contents
   <div>footer

Hi everyone,

It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on...

http://www.karenwilliamson.com/joom2/

I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean.

Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF.

It seems to my novice eyes that it should be controlled by
Code:

table.contentpaneopen

Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers?

Thanks for any input

Rob

Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you

I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css.

I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues.

Here is the site(im new, i cant post URLs): http://aeroprepare.com

You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS.

here is my CSS:
Code:

/*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 14px;
	font-family: inherit;
	vertical-align: baseline;
}ul {list-style: none;}table {	border-collapse: separate;	border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}

/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
    font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
    font-size:12px;
    background-color:#fff;
}

#hm_background, #background { 
    min-height: 100%;
    height: auto !important;
    height: 100%; 
    margin-bottom:-340px;    
}

#hm_background {
    background-repeat:repeat-x;
    background-position:top;  
}

#background {
    background-repeat:repeat-x;
    background-position:top;
}

.clear {
    clear:both;
}

.clear-border {
    margin:15px 0 15px 0;
    clear:both;
    border:1px solid #dbdbdb;
}

#wrapper {
    margin:0 auto;
    width:960px;
}

#logo {
    float:left;
    margin:27px 0 0 0;
    width:284px;
    height:67px;
}

#logo_home {
    float:left;
    margin:32px 0 0 45px;
    width:212px;
    height:52px;
}

/*** navigation ***************************************************************/
#nav_wrap {
    position:relative;
    margin:25px 0 0 460px;
    padding:12px 0 0 15px;
    background-repeat:no-repeat;
    width:464px;
    height:52px;
    z-index:99;
}

#nav {
    list-style-type:none;
    margin:0;
    padding:0;
}

#nav li {
    float:left;
    margin:0;
    padding:0;
}

#nav li a {
    position: relative; 
    float: left;
    margin: 0 11px 0 0;
    padding: 0 17px 0 0;
    height: 37px;
    text-decoration: none;
    color: #fff;
    font-size:12px;  
	z-index: 2;
}

#nav li a span {
    display: block;
    line-height: 21px;
    padding: 3px 0 5px 20px;
    color: #fff;
}

#nav_hover {
	position: absolute;
    float: left;
    margin: 0 11px 0 0;
    padding: 0 17px 0 0;
    height: 28px;
	z-index: 1;
}

#nav_hover span {
    display: block;
    padding: 3px 0 5px 20px;
    line-height: 21px;
    height: 28px;
	z-index: 1;
}

/*** Dropdown ***/
#nav ul {
    position:absolute;
    display:none;
    padding:0 0 12px 0;
    width:142px;
    top:48px;
    list-style-type:none;
    z-index:99;
}

#nav li ul li {
	margin:0;
	padding:0;
}

#nav li ul a, #nav li ul a:visited {
    float:left;
    padding:4px 0 0 12px;
    width:130px;
    height:20px;
    font-weight:normal;
}

#nav ul ul{
	top:auto;
}	

#nav li ul ul {
    left:142px;
    margin:0;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
}


/*** footer *******************************************************************/
#footer_wrap, .push {
    height: 360px;
    clear: both;
}

#footer_wrap {
    background-color:#e5e5e5; /*e5e5e5*/
    border-top:1px solid #B3BCBF;
}

#footer {
    margin:0 auto;
    padding:12px 0 0 40px;
    width:920px;
}

#footer a {
    text-decoration:none;
}

.foot_clm_block {
    float:left;
    margin:25px 15px 15px 0;
    width:165px;
}

.foot_clm_heading {
    margin:0 0 5px 0;
    font-size:14px;
    text-transform:uppercase;
    color:#fff;
}

.foot_clm_block ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.foot_clm_block ul li {
    color:#7F7F7F;
}

.foot_clm_block ul li a {
    display:block;
    padding:5px 0 0 5px;
    height:20px;
    color:#fff;   
    border-bottom:1px solid #CDCDCF;
    font-size:12px;
}

.foot_clm_block ul li a:hover {
    color:#4E4E4E;
}

#search_form_footer {
    margin:5px 0 10px 1px;
    height:24px;
    border:1px solid #fff;
    background-color:#fff;
}

#search_footer {
    float:left;
    padding:3px;
    width:120px;
    border:none;
}

#social_icons {
    margin:5px 0 0 6px;
}

#social_icons a {
    margin:0 4px 0 0;
}

#copyright_wrap {
    border-top:1px solid #f1f1f1;
    height:40px;
}

#copyright_txt {
    margin:0 auto;
    margin-top:10px;
    width:880px;
    color:#fff;
    font-size:11px;
}

#copyright_txt a {
    color:#fff;
    font-size:11px;
}

/*** home page ****************************************************************/
#hm_header {
    height:139px;
    background-repeat:no-repeat;
    background-position:top center;
    padding-top: 1px;
    padding-bottom: 1px;
}

#slider {
    margin:0 0 0 23px;
    padding:10px 0 0 33px;
    background-repeat:no-repeat;
    width:881px;
    height:298px;
}

#slider_imgs img {
    display:none;
}

#news {
    margin:15px 0 10px 25px;
    background-image:url(../images/news_back.jpg);
    background-repeat:no-repeat;
    width:911px;
    height:65px;  
    overflow:auto; /* fixes margin collapsing */
}

#news_icon {
    float:left;
    margin:17px 0 0 17px;
    background-image:url(../images/airplaneminilogo.png);
    background-repeat:no-repeat;
    width:55px;
    height:41px;     
}

#news_text {
	margin:20px 0 0 15px;
	float:left;
	font-size:20px;
	text-align:left;
	width:800px;
}

#news_text ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#news_text a {
    text-decoration:none;
}

#three_columns {
    margin:0 0 0 25px;
    background-image:url(../images/3column_back.jpg);
    background-repeat:no-repeat;
    width:910px;
}

.three_clm_block {
    float:left;
    margin:25px 0 45px 0;
    padding:0 25px;
    width:250px;
    height:200px;
    background-image:url(../images/3column_border.jpg);
    background-repeat:no-repeat;
    background-position:top left;
}

.three_clm_circle {
    float:left;
    padding:6px 0 0 0;
    width:32px;
    height:26px;
    background-repeat:no-repeat;
    background-position:top left;
    color:#fff;
    text-align:center;
    font-size:16px;
    font-weight:bold;
}

.three_clm_title a {
    float:left;
    padding:5px 0 0 8px;
    font-size:20px;
    text-decoration:none;
}

.three_clm_text {
    padding-top:7px;
    clear:both;
    line-height:19px;
}

/*** portfolio ****************************************************************/
#port_title h1 {
    margin:15px 0;
    font-size:34px;
    font-weight:normal;
}

#port_wrap {
    padding:32px 0 0 0;    
}

.port_block {
    float:left;
    margin:0 22px 22px 0;
    padding:7px;
    background-color:#d6d9da;
    border:1px solid #a7a9a9;
    width:426px;
    height:346px;
}

.port_img {
    position: relative;
    border:1px solid #fff;
    background-color:#fff;
    width:425px;
    height:324px;
}

.port_txt {
    position: absolute;
    top: 110px;
    left: 0;
    padding:2px 0 0 10px;
    width:240px;
    height:18px;
    background-color:#fff;
}

.port_mag_img {
    position: absolute;
    top: 10px;
    left: 81px;
}

.port_txt a {
    font-weight:bold;
    text-decoration:none;
}

.port_img img {
    border:none;
}

/*** blog / static page *******************************************************/
#header {
    height:139px;
    background-repeat:no-repeat;
    background-position:top center;
    padding-top: 1px;
    padding-bottom: 1px;
}

#breadcrumb {
    padding:15px 0 0 0;
    height:25px;
    color:#fff;
    font-weight:bold;
}

#breadcrumb a {
    color:#fff;
    font-weight:bold;
    text-decoration:none;
}

/*** sidebar ***/
#sidebar {
    float:left;
    margin:25px 0 0 0;
    width:220px;
}

.sidebar_block {
    margin:0 0 35px 0;
}

.sidebar_heading {
    font-size:18px;
    border-bottom:5px solid #d6d9da;
    color:#23353e;
}

#sidebar ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#sidebar ul li a {
    display:block;
    padding:4px 0 0 30px;
    height:21px;
    border-bottom:1px solid #d6d9da;
    text-decoration:none;
    color:#B3BCBF;
    background-image:url(../images/bullet_arrow.jpg);
    background-repeat:no-repeat;
}

#sidebar ul li ul li a {
    padding:4px 0 0 54px;
    background-image:url(../images/bullet_arrow_sub.jpg);
    background-repeat:no-repeat;
}

#sidebar a:hover {
    color:#959D9F;
}

#search_form {
    margin:5px 0 0 1px;
    width:216px;
    height:24px;
    border:1px solid #d6d9da;
    background-color:#fff;
}

#search {
    float:left;
    padding:3px;
    width:180px;
    border:none;
}

.search_btn {
    float:right;
    margin:1px 0 0 0;
    background-image:url(../images/search_icon.jpg);
    background-repeat:no-repeat;    
    background-position:center;
    border:none;
    background-color:transparent;
    cursor:pointer;
    width:25px;
    height:22px;
}

/*** content ***/
#content {
    float:left;
    margin:25px 0 0 55px;
    width:645px;
}

#contentblog {
    float:left;
    margin:25px 0 0 55px;
    width:100%;
}

#content_full {
    float:left;
    margin:25px 0 0 0;
}

.post_block {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom:1px solid #d6d9da;    
}

#page_block {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;  
}

#page_title h1 {
    margin:0 0 5px 0;
    padding:0;   
    font-size:34px;
    font-weight:normal; 
    
}

#content h1 a {
    font-size:34px;
    font-weight:normal;
}

.post_meta {
    height:20px;
    font-weight:bold;
    color:#929393;
}

.post_meta a {
    text-decoration:none;
    font-weight:bold;
    color:#929393;
}

.post_img {
    padding:7px 0;
    margin:10px 0;
    border-top:1px solid #d6d9da;   
    border-bottom:1px solid #d6d9da;
}

.post_txt {
    line-height:20px;
    color:#23353e;
}

.post_txt img {
    padding:3px;
    border:1px solid #b3b3b3;
}

.onethird {
    padding: 0 0 0 15px;
    float:left;
    width:30%;
}

.onehalf {
    padding: 0 0 0 15px;
    float:left;
    width:47%;
}

.twothirds {
    padding: 0 0 0 15px;
    float:left;
    width:64%;
}

.post_readmore {
    margin:5px 0 0 0;
}

.post_readmore a {
    text-decoration:none;
    font-weight:bold;
    color:#23353e;
}

#pagination {
    margin:15px 0;
    height:32px;
}

#pagination ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

#pagination ul li { float:left;}

#pagination ul li a {
    float:left;
    margin:0 5px 0 0;
    padding:8px 0;
    width:31px;
    height:23px;
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    background-image:url(../images/pagination.jpg);
    background-repeat:no-repeat;
}

#pagination ul li a.active, #pagination ul li a:hover {
    background-image:url(../images/pagination_active.jpg);
    background-repeat:no-repeat;    
}

/*** comments *****************************************************************/
#comments {
    margin:0 0 40px 0;
}

.comm_block {
    padding:25px 0 25px 0;
    border-bottom:1px solid #e7e7e7;
}

.comm_avatar {
    float:left;
    padding:3px;
    width:50px;
    height:50px;
    background-color:#fff;
    border:1px solid #e7e7e7;
}

.comm_meta {
    float:left;
    margin: 0 0 0 20px;
    width:550px;
}

.comm_author {
    font-size:16px;
}

.comm_text {    
    float:left;
    margin: 0 0 0 20px;
    width:564px;
    line-height:18px;
}

.comm_even {
    background-color:#fff;
}

#comm_form {
    margin:20px 0;
}

/*** contact ******************************************************************/
#contact_txt {}

#google_map {
    margin:5px 0;
    border:1px solid #b3b3b3;
}

#contact_form {
    margin:20px 0;
}

.err {
    color:#BF2323;
}

/*** forms ********************************************************************/
.form_tb {
    padding:3px;
    width:400px;
    height:18px;
    border:1px solid #b3b3b3;    
    color:#254A59;
}

.form_ta {
    padding:3px;
    width:639px;
    height:150px;
    border:1px solid #b3b3b3;
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:12px;
    color:#254A59;
}    

.form_btn {
    padding:5px 7px;
    font-family:Arial, Helvetica, Verdana, sans-serif;
    font-size:12px;
    color:#fff;
    border:none;
    background-color:#fff;
    cursor:pointer;
    background-repeat:no-repeat;
    width:114px;
    height:33px;    
}

/*** global *******************************************************************/
ul {
    padding:0 0 0 30px;
    list-style-type:square;
}

ol {
    padding:0 0 0 30px; 
}

a {
    color:#03181F;
}

p {
    margin:0 0 10px 0;
}

h1 {
    margin:0 0 15px 0;
    font-size:34px;
    font-weight:normal; 
}

h1 a {
    text-decoration:none;
}

h2 {
    margin:0 0 7px 0;   
    font-size:24px;
    font-weight:normal; 
}

h3 {
    margin:0 0 5px 0;  
    font-size:18px;  
    font-weight:normal; 
}

h4 {
    margin:0 0 5px 0; 
    font-size:16px;   
    font-weight:bold; 
}

h5 {
    margin:0 0 3px 0;  
    font-size:14px;  
    font-weight:bold; 
}

blockquote {
    margin:20px 0 20px 30px;
    padding:0 10px;
    border-left:5px solid #dbdbdb;
}

strong {
    font-weight:bold;
}

.hidden {
    display:none;
}

.noborder {
    border:none;
}

.noimage {
    background-image:none;
}

.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

view page source to see the home page. I dont have the footer in an incorrect div (that i can see)

Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections...

If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer....

PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant.

Hi all,
this is my first post and hope I get help in a hear-tearing problem that I face at this link: (URL address blocked : See forum rules)

ie show the complete page fine but firefox obscure the bottom content, no need for more explanation since it is obvious from looking at the page, I have the same problem when page content get much long as in the above link.
any help would be greatly appreciated.
sorry for my bad english