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

I'm attempting to get a page that has a header, footer, left navigation bar with a fixed width, with a right "fluid" content section. I can get it to work by giving the main content a "margin-left" of the width of the navigation panel, and absolutely positioning the navigation. Problem is, with the navigation being absolutely positioned, it takes it out of the flow and doesn't push the container to fit its contents. I've trying playing with using floated divs, which is I'm sure the way I'll have to go, but I want the navigation bar to always be a fixed width of 175px, and I want the content section to stretch to fill the remaining space. I'd also like to make sure the content portion appears BEFORE the navigation panel in the order it appears on the HTML for SEO purposes. I'm sure it's easy using Javascript, but I'd like to do a pure CSS solution, if possible. How do I do that? Here is the link if you want to have a look:

http://www.chcs-ut.com/support.php?section=technical

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

Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen).

CSS code:

Code:

#extraDiv1 {
	background: url(images/header1.png) repeat-x;
	position: absolute; 
	top: 0px; 
	left: 0px; 
	width: 100%; 
	height: 100px;
	margin: 0;
	padding: 0;
}

HTML

Quote:
<div id="extraDiv1"></div>


thanks.

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

<div class="clear"></div>

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob

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

hi all, right have got a problem which has been bugging me for days now. i have 4 columns in a row (inside a wapper div)which all will have different content image, text other divs/classes etc. now one of these columns will be quite fluid as it will have different text on each page meaning it will be quite long on some pages not on others. the problem i am getting is in the good browsers firefox etc its ok in IE6+. the wapper does'nt seem to see the divs in the content meaning it does not get filled, meaning that the footer flys to the top and not where it should be, i dont have a live version but heres the code: mainly thanks Dan

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#con {
width:940px;
height:400px;
background-color:#00FFFF;
}
#wapper {
width:940px;
background-color:#006666;
}
#box {
width:940px;
background-color:#000033;
height:40px;
}
#menu-pronuptia {
width:185px;
background-color:#6633CC;
float:left;
display:inline;
}
#menu-pronuptia1 {
width:185px;
background-color:#009900;
display:inline;
float:left;
}
#menu-pronuptia2 {
width:385px;
background-color:#0033CC;
display:inline;
float:left;
clear:inherit;
}
#menu-pronuptia3 {
width:185px;
background-color:#CCCC33;
display:inline;
float:left;
}
-->
</style>
</head>
<body>
<div id="wapper">
<div id="menu-pronuptia">
<p>test</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="menu-pronuptia1">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="menu-pronuptia2">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div id="menu-pronuptia3">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
<div id="box">
<p><br />
</div>
</body>
</html>

All,
I have a header on this page backup.whiteslimo.com with 3 images inserted into it listing the company name, service, and contact info. My problem is that when they are displayed there is a thin white border on the bottom and right hand sides of each image. But the image doesn't have these borders. If you are in Firefox/Mozilla and you right click on the individual images and select View Image, you will see that the image itself does not have these borders. I am thinking that somewhere along some attribute is being added that is causing this but since I am a CSS neophyte (This is still my first week lol) I am not sure. Any help is much appreciated.

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?

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!

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.

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.

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.

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

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">
<!--

/* CSS Document */

body{
background-color:#FFFFFF;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
font-size:80%;
text-align:center;
}


#wrapper{
width: 750px;
background-color:#FFFFFF;
margin: 10px auto;
text-align: left;
}
/* ---------------------------------Header content---------------------------------------------*/
#header {
height: 150px;
border-bottom: 1px solid #CC0000;
}

/*this is to make sure al content apears below the header*/
.clearit{
clear: both;
display: block;
}
/*---------------------------------Main Contant------------------------------------------------*/
#content {
background-color:#FFFFFF;
margin-left:177px;
margin-top:25px;
margin-right:100px;
}

#content p{
background-color:#FFFFFF;
}

#content h1{
font-size: 140%;
color: #CC0000;
padding: 0;
margin-bottom:20px;
font-weight:bold;
}

#content h2{
font-size: 110%;
color: #CC0000;
padding: 0;
margin-top:30px;
}

#content li{
color:#000000;
list-style-position:inside;
list-style-type:disc;
}

#content form h3{
font-size: 100%;
color: #CC0000;
padding: 0;
margin:0;
}

#content form h2{
font-size: 115%;
color: #CC0000;
padding: 0;
text-transform:uppercase;
}

.BoldRed{
color:#CC0000;
font-weight:bold;
}

.verse{
color:#006699;
font-style:italic;
}
/*use for commendattions names*/
.greyed {
color:#666666;
font-style:italic;
}

.leftimage{
float: left;
margin-right: 10px;
margin-bottom:10px;
border: 1px solid #000000;
clear:left;
}

.container{
width:99%;
float:right;
}


/*-------------------------------Left Collum Content---------------------------------------------*/
#leftcol {
font-size:100%;
margin-top:30px;
float:left;
width: 167px;
background-color: #FFFFFF;
}
/*------------------------------Footer Content---------------------------------------------------*/
#footer{
margin-top:30px;
border-top: 1px solid #CC0000;
background-color: #FFFFFF;
color: #000000;
clear: both;
}

-->
</style>
</head>

<body>
<!-- Start wrapper -->
    <div id="wrapper">
        
<!-- Start of Header -->    
        <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>
        
        <!-- Clear a line-->
            <div class="clearit">
            </div>
        
        </div>
<!-- End of Header -->
        
<!-- Start of Left Colum -->
        <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>
<!-- End of Left Colum -->
        
<!-- Start of Content -->
        <div id="content">
            <h1>Heading</h1>
            <p>Some Content. This may very in length</p>
        </div>
<!-- End of Content -->
        
<!-- Start of Footer -->
        <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>
<!-- End of Footer -->
            
    </div>
<!-- End wrapper -->

</body>
</html>