Learn VBA & Macros in 1 Week!

CSS - How To Make My Header And Footer Stick To Bottom?

Full Excel VBA Course - Beginner to Expert

How To Make My Header And Footer Stick To Bottom?	View Content

Hi. How to make my header and footer stick to bottom?

For the header div, I have background image and a logo (test) but the bg image does stick to the bottom to touch the menu?

For the footer, it doesn't stick to the bottom of the page?

Anyone can help me out? Here's the link of the test page with css inside the source code.

Really appreciate if anyone can help. Thank you.

yourbestproduct dot com/test.html (Sorry, I'm new user so can't put exact url)

Full Excel VBA Course - Beginner to Expert

Stick Footer To Bottom

Similar Tutorials

View Content

Hey

I am relativly new to CSS and i was wondering how can i make the footer of my page stick to the bottom of the screen if the page is relativly short. I use a 800x600 as my design size but there might be long and short pages.

Can anyone shed some light?

Here is my code

PHP 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" title="Disabled for Preview-in-Browser: ../css/basics.css" type="text/css" />
<style type="text/css">

</style>
</head>

<body>

    <div id="wrapper">


        <div id="header">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150">
            <param name="movie" value="../homepageFlashElements/header.swf" />
            <param name="quality" value="high" />
            <embed src="../homepageFlashElements/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed>
          </object>

        
            <div class="clearit">
            </div>

        </div>



        <div id="leftcol">
          <div align="left"><img src="../images/courses/colours_08.jpg" width="143" height="143" border="1px"/></div>
          <p>    Navigation content here
          </p>
          <p></p>
      </div>



        <div id="content">
            <h1>Heading</h1>
            <p>Some Content. This may very in length</p>
        </div>



        <div id="footer">
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="50">
              <param name="movie" value="../homepageFlashElements/footer.swf" />
              <param name="quality" value="high" />
              <embed src="../homepageFlashElements/footer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="50"></embed>
          </object>
        </div>


    </div>


</body>
</html>

Footer To Stick To Bottom Of Document

Similar Tutorials

View Content

Can somebody please help me with a problem i am having with my footer. I have been reading through articles and help forums for days now trying to get a footer on my theme that will stick to the bottom of the document. At the moment the Footer is sticking to the bottom of the page, but as the content of my pages are longer than the viewpoint, My footer is appearing in the middle of my content. I have been trying all sorts to try and figure this out, and everything i try seems to not work.

My website is here
My HTML code can be found here
And my CSS Code can be found here
Many thanks,

Making Footer "stick" To The Bottom

Similar Tutorials

View Content

Hey all,

See on http://yourfishguide.com/Main_Page the grass at the bottom is 'siting' on the bottom of the page? Then on http://yourfishguide.com/Your_Fish_Guide:About it's a little above the bottom of the page. How can I make the grass "stick" to the bottom of the page, regardless of the length of the content above it?

Thanks,
Jordan

White Gap On Bottom Of Firefox Using 3 Column With Header And Footer.

Similar Tutorials

View Content

Using my http://www.thatspotonline.com as an example I'll explain my problem. I'm trying to use a 3 column fluid layout with a header and a footer. I've gotten past the browser problem with IE and now face a new problem with proper display in firefox. With the included css and attached xhtml layout I end up with a rather large gap on the bottom of the design without adding quite a bit of content to make the page length grow. I've tested with about everything else and this problem doesn't show up. I would gladly take some advise if anyone has any thanks.
Code:

* {
    margin:0 auto;
	padding:0;
}
h2 {
	font:bold 2em/1.4 "Lucida Bright", Georgia, Times, serif;
	color:#8B9F86;
}
h3 {
	font:bold 1em/1.6 "Lucida Bright", Georgia, Times, serif;
	color:#845697;
}

a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}

body {
	background:#000000 url(images/body2.jpg);
	background-repeat:repeat;
	background-position:top left;
	font-size:90%;
	margin:0 auto;
	padding: 24px 0;
}

#outer {
    margin:0 auto;
	width:80%;
    min-width:40em;
    max-width:70em;
	border:10px solid #EEEEEE;
	border-width:0 5px;
    background:#EEEEEE;
}

ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav, * html #content, * html form, * html form div {
	height:1%;
}

ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}

hr {display:none}


#header {
	background:#EBEBE9 url(images/banner-bg2.jpg) repeat-x left bottom;
}
#header h1 {
    padding-left:.6em;
    font:bold 3em/2.5 "Lucida Bright", Georgia, Times, serif; /* line-height allows for image of buildings */
    letter-spacing:1pt;
	color:#FFFFFF;
    background: transparent url(images/banner2.jpg) no-repeat right bottom; 
}
#header h1 a {
	color:#FFFFFF;
	text-decoration:none;
}

ul#nav {
   	list-style:none;
   	margin:3px 0 1em;
	text-align:center;
   	background:#FFFFFF;
   	border-top:2px solid #444444;
   	border-bottom:2px solid #444444;
}
#nav li {
    list-style:none;
    margin:0 auto;
	width:94%;
    min-width:40em;
    max-width:70em;
	display:block;
    text-align:center;
	background:#000000;
}
* html #nav li {
	width:24.9%;
}
#nav a {
    display:block;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	text-decoration:none;
	color:#444444;
	margin:1px;
	background:#FFFFFF;
}
#nav a:focus, #nav a:hover, #nav a:active {
	border:1px inset #8B9F86;
	margin:0;
	color:#EB8518;
	text-decoration:underline;
}

ul#nav li#active {
	background:#FFFFFF;
	font:bold 1em/1.8 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	color:#000000;
	text-decoration:underline;
}

#sub, #right {
	font: 1em/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
}

#sub {
	width:74%;
	float:left;
	position:relative;
}

#center {
	width:65%;
	float:right;
}
#left {
	width:33%;
	float:left;
}
#right {
	width:25%;
	float:right;
}
 

#center p {
	margin:.5em 2% .5em 0;
}
img.img-right {
	float:right;
}


#left h2 {
	color:#845697;
	font-size:1.5em;
}
#left p {
	font-size:.9em;
}

#right {
	font-size:.9em;
}
#right h2 {
	font-size:1.2em;
}

/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font: 0.9em/1 'Lucida Grande', arial, tahoma, verdana, sans-serif;
	border-top:3px double #C8DCC2;
	
}
#footer p {
	margin:1em 1em 1em 0;
	text-align:center;
	padding: 21px 0;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
	
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
}

Getting Content To Stick To Footer?

Similar Tutorials

View Content

Is it possible to get my content to stick to my footer? I have a sticky footer at the bottom of my page and I would like the content to always bee 100% of the page and sitting right on top of the footer.

I been messing around with different things for hours and nothing I seem to do will get my content box to stay stuck to the footer at the bottom of my page.

Here is a link to the site printing.ou.edu/new-index.html

This is what I am trying to get printing.ou.edu/Draft3.png

Thanks for your help :-)

(EDIT)
I have Solved this problem sadly I had to use Java Script to get it done but it works.

Here is the Java Script for anyone else trying to do something like this.

Code:

<script type="text/javascript">
window.onload = function() {
  contentHeight();
}
window.onresize = function() {
  contentHeight();
}

function contentHeight() {
	if (document.getElementById) {
		var windowHeight = getWindowHeight();
		var headerHeight = document.getElementById('header').offsetHeight;
		var footerHeight = document.getElementById('footer').offsetHeight;
		var pushHeight = document.getElementById('push').offsetHeight;
		var menuHeight = document.getElementById('menu').offsetHeight;
		var contentElement = document.getElementById('content');
		var contentbgElement = document.getElementById('content-bg');
		contentElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
		contentbgElement.style.height = (windowHeight - (headerHeight + footerHeight + pushHeight + menuHeight)) + 'px';
	}
}

function getWindowHeight() {
	var windowHeight = 0;
	if (typeof(window.innerHeight) == 'number') {
		windowHeight=window.innerHeight;
	}
	else {
		if (document.documentElement && document.documentElement.clientHeight) {
			windowHeight=document.documentElement.clientHeight  ;
		}
		else {
			if (document.body && document.body.clientHeight) {
				windowHeight=document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}
</script>

See you all around

How Do I Make My Background Image Stick With Zoom In Css?

Similar Tutorials

View Content

Even when I zoom out to the least point, I want my background image in my webpage to stay normal size. How do I do this?

Artifact In Footer In Ie, Footer Not At The Bottom In Ff

Similar Tutorials

View Content

I'm having trouble with my website structure... view this page for an example...

css is here...

The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page...

It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF...

how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF?

Thanks
Bryan

Footer Won't Stay At The Bottom

Similar Tutorials

View Content

Footer Positioning At Bottom

Similar Tutorials

View Content

Hi!

i'm trying to position footer at the very bottom.
this example does it as expected (if the page is longer than viewport, footer will be at the end of page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>		
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        <!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<h1>Content</h1>
			<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body></html>

but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page):
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<style type="text/css">
        		<!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#head
			{
				padding-left:20px;
				padding-top:20px;
				padding-right:20px;
				background-color: #FFF;
				background-image: url('/public/images/header-background.gif');
				background-repeat: repeat-x;
				background-position: bottom
			}
			#logo
			{
				height: 100px;
				background-image: url('/public/images/header.jpg');
				background-repeat: no-repeat
			}
			#content
			{
			}
			#leftcontent
			{
				float:left;
				width:67%;
				margin:10px;
				padding:30px 30px 70px 30px;
				border: 1px solid #000;
				background-color: #33251C
			}
			#leftcontent h1
			{
				color: #936FC4
			}
			#leftcontent h2
			{
				color: #FFF
			}
			#rightcontent
			{
				margin:15px
			}
			p, pre
			{
				margin:0px 30px 10px 30px
			}
			#rightcontent p
			{
				font-size:10px;
				margin-left:0px
			}
			#navcontainer
			{
				margin: 0;
				padding: 0;
				height: 22px;
				font: 11px Verdana, sans-serif;
				width: 100%;
				border-top: 1px solid #bbb;
				border-bottom: 1px solid #bbb;
				list-style-type: none;
				background: #FFF
			}
			#navlist li
			{
				float: left;
				margin: 0;
				padding: 0;
				width: auto;
				display: block
			}
			#navlist li a, #navlist li a:link
			{
				background: #FFF;
				color: #555;
				text-decoration: none;
				padding: 3px 5px 3px 5px;
				display: block
			}
			#navlist li a#current, #navlist li a#current:link
			{
				color: #000;
				cursor: default;
				font-weight: bold;
				border-bottom: 3px solid #f90;
				background: #EEE
			}
			#navlist li a#current:hover
			{
				border-bottom: 3px solid #999;
				background: #DDD
			}
			#content {
				padding: 10px;
				background-color: #ff8080;
			}
			#footer {
				position: absolute;  /* Needed for Safari */
				padding: 10px;
				background-color: #aa3939;
				width: 75%;
			}
			#footer h1 {
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setFooter() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentHeight = document.getElementById('content').offsetHeight;
					var footerElement = document.getElementById('footer');
					var footerHeight  = footerElement.offsetHeight;
					if (windowHeight - (contentHeight + footerHeight) >= 0) {
						footerElement.style.position = 'absolute';
						footerElement.style.top = (windowHeight - footerHeight) + 'px';
					}
					else {
						footerElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setFooter();
		}
		window.onresize = function() {
			setFooter();
		}
		//-->
		</script></head><body>
		<div id="content">
			<div id="head">
				<div id="logo">
				</div>
			</div>
			<div id="navcontainer">
				<ul id="navlist">
				<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
	
			</div><br/>
			<div id="leftcontent">
				<h1>My Mixes</h1>
				<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
			</div>
			<div id="rightcontent">
				right side
			</div>
		</div>
		<div style="position: absolute; top: 810px;" id="footer">
			<h1>Footer</h1>
		</div>
	</body>
</html>

how may i fix it?
thanx!

Moving Footer To The Bottom

Similar Tutorials

View Content

I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar.

Does anybody know how to do this?

Any help would be appreciated. Thank you!

Footer Refusing To Go To The Bottom In Ie7!!

Similar Tutorials

View Content

Hi there, my first post here.

I'm working on my first site using CSS for layout. I have a footer as a div that I want to be the last thing on the page, doesn't need to stick to the bottom or anything. It's obeying on my other pages, but on this index page I can't figure out why its not going to the bottom.

the site is at w w w. montrosemusicseries com / indextest html

I'm assuming its some kind of float thing that's not clearing, but I have my <br style="clear:both"/> in there. I also tried a div clear to no avail. Any suggestions?

Thanks,

Stuart

A Footer That's Always On The Bottom Of The Screen

Similar Tutorials

View Content

I created a footer that sits on the bottom of the screen using this code:

.footer {
padding-top:5px;
margin-top:5px;
font-size:8pt;
color:#FFFFFF;
position:absolute;
bottom:0px;
background-image:url('gfx/bg-bottom.jpg');
height:22px;
width:100%;
}

It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he

http://www.juiceboxseo.com/do-it.php

Is there a way to make sure it stays on the bottom?

Keeping Footer At Bottom?

Similar Tutorials

View Content

I believe this has been asked before, but I'm unsure what search terms to use...

Basic one column CSS layout. How to keep the footer at the bottom of the window even when content doesn't reach that far?

Can't Get The Footer To Align With The Bottom

Similar Tutorials

View Content

Ok, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out.

Here's the code:

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">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!--CSS-->
		<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
	
			<title> MY TITLE GOES HERE! </title>
		
	</head>
	
<body>

<div id="container">

        <div id="nav_container">

	MY MENU STUFF GOES HERE!

        </div>

<div id="content">

	<div id="left_column">
	
	BLAH BLAH all my content goes here!

	</div>
	
<div id="right_column">
	
ALL OF MY RIGHT CONTENT HERE!
			
</div>

</div>

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

</div>

</body>

</html>

and this is the stylesheet driving the page:

Code:

body {
	background-image: url("gfx/bg.jpg");
	background-repeat: repeat-y;
	background-position: center;
	background-color: #FFFFFF;
	margin: 0px;
	font-family: Tahoma;
	font-size: 13px;
}



/*Page Structure --------------------------------------*/
#container {
	background-color: #FFFFFF;
	position: absolute;
	left: 50%;
	margin-left: -394px;
	width: 790px;
	height: 100%;
	border: 1px solid Black;
	border-top: 0px;
	border-bottom: 0px;
}

#content {
	background-color: #FFFFFF;
	width: 790px;
	float: left;
	margin: 0px;
	padding: 0px 0px 0px 0px;
}

#left_column {
	width: 390px;
	float: left;
	display: inline;
	margin: 15px 0 0 20px;
   padding: 0px 0px 15% 4px;
	border-right: 1px solid #DFDFDF;
}

#right_column {
	width: 326px;
	float: left;
	margin: 15px 0 0 0px;
   padding-bottom: 10%
}



/*Headers and Flash content -----------------------------*/
#header	{
	background-image: url("gfx/header.jpg");
	width: 790px;
	height: 101px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#home_header {
	background-image: url("gfx/home_header.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 380px;
	height: 150px;
	margin: 0px 0 10px 0px;
	float: left;
	line-height: 1000px;
	overflow: hidden;
}

#recent_posts	{
	background-image: url("gfx/recent_posts.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin-left: 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#latest_threats	{
	background-image: url("gfx/latest_threats.jpg");
	background-repeat: no-repeat;
	width: 368px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#recommended_sites	{
	background-image: url("gfx/recommended_sites.jpg");
	background-repeat: no-repeat;
	width: 215px;
	height: 30px;
	margin: 25px 0 0 3px;
	float: left;
	text-indent: -1000px;
	overflow: hidden;
}

#flash	{
	background-color: #000000;
	width: 790px;
	height: 120px;
	float: left;
	vertical-align: middle;
}



/*Navigation --------------------------*/
#nav_container	{
	background-image: url("gfx/nav_bg.jpg");
	background-color: #FFFFFF;
	width: 790px;
	height: 24px;
	float: left;
	text-align: right;
}


/*News Structure --------------------------*/
#news_header	{
	background-color: #FFFFFF;
	width: 390px;
	height: auto;
	float: left;
	font-size: large;
	font-weight: bold;
	color: #009AFF;
	margin: 3px 0 2px 0;
}

#news_post	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	color: Gray;
	margin: 0px;
}

#news_date	{
	background-color: #FFFFFF;
	width: auto;
	height: auto;
	float: left;
	font-size: 11px;
	font-style: italic;
	color: Gray;
	margin-left: 5px;
}

#news_content	{
	background-color: #FFFFFF;
	width: 390px;
	float: left;
	margin-top: 20px;
}



/*Lists----------------------------------*/

#post_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#post_list li {
	background-color: transparent;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}

#threats_list {
	background-image: url("gfx/gradient.jpg");
	width: 371px;
	float: left;
	margin: 2px 0 0 0px;
	list-style-type: none;
	padding: 0px 0px 10px 0px;
}

#threats_list li {
	background-color: transparent;
	list-style-image: url("gfx/red_arrow2.jpg");
	list-style-position: inside;
	padding: 5px;
	border-bottom: 1px solid #EDEEEE;
}


/*Footer--------------------------------------------------*/
#footer {
	background-image: url("gfx/footer.jpg");
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	width: 790px;
	height: 125px;
	float: left;
	margin-top: 40px;
}

Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this

Thanks in advance,
AA.

Can't Get Footer To Stay At Bottom ?

Similar Tutorials

View Content

I've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content.

I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3
http://www.themaninblue.com/writing/perspective/2005/08/29/

but I'm having a hard time with the longer content page.

Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php
Long page: http://windrivers-gsp.com/WRK/hclub.php or
http://windrivers-gsp.com/WRK/dams.php

As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div.

I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated!

Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css

And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed.

Css -- Div -- Can't Get Footer To Go To The Bottom Of The Page

Similar Tutorials

View Content

http://wdcb.org/newsite/

Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something.

Page code:
Code:

<html>  
	<body>
		
			<div id="header">
				<?php include('includes/menu_new.inc'); ?>
			</div>
			
				<div id="leftcol">
					<div class="element">
						<img alt="" src="../images/buttons/PledgeNow.jpg">
						<p>This is what text underneath would look like.  I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
					</div>
					
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
		
					<div class="element">
						<b>PLEDGE NOW</b>
					</div>
				</div>
			
				<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
			
				<div id="rightcol">
					<div class="element">
						<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
					</div>
				
					<div class="element">
						<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
						<p>
							Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
							<br><br>
							<a href="programming/progfolkroot.php">Click here</a> to learn more.
						</p>
					</div>
				</div>
			
			<div id="footer">
				<?php include('includes/footer.inc'); ?>
			</div>
				
	</body>  
</html>

CSS code:
Code:

#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}

#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}

#leftcol .element {
	margin-bottom:15px;
}

#leftcol p {
	margin-left:5px;
}

#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}

#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}

#rightcol .element {
	margin-bottom:15px;
}

#rightcol p {
	margin-left:5px;
}

#footer {
   position:fixed;
   bottom:0px;
   width:1000px;
   height:100px;
   background:#005288;
}

Thank you in advance for your help.

Keep Footer At Bottom Of Page In Firefox 3.6.6

Similar Tutorials

View Content

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

Force Footer Div To Bottom Of Window

Similar Tutorials

View Content

Suppose this:

-----

Header Div

Content Dive

Footer Div

-----

Is there a way to force a footer div to the bottom of the window even when there isn't enough content above to fill the window?

Maybe some way to "pad" the content div?

Pushing Footer To Bottom Of Page...

Similar Tutorials

View Content

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

Footer Fixed To The Bottom Works In Ff But Not Ie...

Similar Tutorials

View Content

I know there is a well documented solution for this but as I can't remember what is causing it, it's a bit hard to search for it.

Basically I want to fix my footer to the bottom of the page. As soon as I set it's position to fixed it works in Firefox but in IE the footer shoots back up to the top of the page.

If I set the position to absolute then the footer starts at the bottom but the page scrolls with the page content. Sorry for the large amounts of CSS / HTML.

PHP Code:
<style type="text/css">

</style>

DIV Layout:

PHP Code:
<body>

<div id="wrap">

    <div id="inner_holder">

        <div id="left">

            left

        </div>

        <div id="main">

            <div id="right">

                right

            </div>

            <div id="content">


            </div>

        </div>

    </div>

    <div id="os_logo">

        <img src="images/layout/xxx_logo.jpg" alt="Logo" width="196" height="78" />

    </div>

    <div id="os_search">

        <form action="searchsite.php" method="post" name="search">
            <label for="search">Search Site</label>
            <input name="search" id="search" type="text" size="20" />
            <input name="submit" type="submit" value="GO" />
        </form>

    </div>

    <div id="footer_hold_all">

        <div id="footer_hold_top">

            <div id="footer_top"></div>

        </div>

        <div id="footer_hold_bottom">

            <div id="footer_bottom" class="bold">

                <a href="sitemap.php">Sitemap</a> |
                <a href="accessibility.php">Accessibility Options</a> |
                <a href="http://validator.w3.org/check?uri=referer;verbose=1">XHTML Valid</a> |
                <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a>

            </div>

        </div>

    </div>

</div>

</body>