CSS - Trouble With Sticky Footer & Absolute Posistioning

Hello Guys,

I'm hoping someone might be able to help me here.

I have been developing a site for a friend who is starting his own company. I'm a self taught web designer and I'm relatively fresh when it comes to CSS, but I thought I'd give it a shot.

I decided to use a sticky footer as I think it makes for a cool look.

Everything is working wonderfully in Firefox, but when I test in other browsers I have issues.

1) Safari & IE7

Strange things are happening with the main content not fully displaying The footer isn't "pushed" down by the main site contents and covers up some of the content.

Safari is even weirder because it works sometimes when I move around the size of the window itself, making it thinner (my screen is fairly wide).

2) IE 7

My right hand floated div (#contentright) appears in the wrong place. This doesn't happen in Firefox or Safari and I have no idea why. As far as I can tell it should be within the wrapper, to the right of the left content. This is on the sub-pages - there is no right side on the home page.

If anyone can help out with these issues I would be grateful.

Site is at:
<removed at users request>

CSS is at:
<removed at users request>

Code is more or less W3C valid as is CSS, bar a few minor issues which shouldn't be relative to the above.

Many thanks,

Jo

Please take a look at this page in IE 6.0:

http://ist4pos.com/pos_solutions/gemini.html


The sticky footer does one of three things. It either sticks properly, it cuts the page off at the fold, or it sticks to the bottom of the page but with several inches of white space underneath. If you refresh the page if will change from one to another. If you click around the site, other pages do this as well, so long as they are long enough to push the page past the fold.

IE7 usually works but sometimes the footer hovers in the middle of the page.

I can't understand why the same browser on the same computer can render the same page completely differently several times in a matter of seconds.

Here is my CSS. All the relevant stuff is right at the top:

Code:

html, body, #outerDiv {height: 100%;}

body > #outerDiv {
	min-height: 100%;
}

#main {padding-bottom: 35px;}  /* must be same height as the footer */

#footer p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: .75em;
	color: #FFF;
	text-align: center;
	padding-top: 10px;
}

#footer {
	position: relative;
	margin-top: -35px; /* negative value of footer height */
	height: 35px;
	clear:both;
	background-color: #CCC;
} 

/* ===== global styles ===== */

h1, h2, h3, h4, h5, h6, p, {
	margin: 0;
	padding: 0;
}

body {
		margin: 0;
	padding: 0;
	background-image: url(images/backGrad2.jpg);
	background-repeat: repeat-x;
	text-align:center;
}
#outerDiv #threeColumns #middleColumn ul li ul {
	font-size: 16px;
}


p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	color: #666;
	margin: 0px 0px 10px;
	padding: 0px;
	list-style-type: square;
	line-height: 1.6em;
	text-align: left;
}


h1 {
	font-family:Cambria, Verdana, Geneva, sans-serif;
	font-size:1.4em;
	color: #0067AC;
	text-align: left;
	line-height: normal;
	font-weight: normal;
	margin-bottom: 2px;
	margin-top: 5px;
}
h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.8em;
	color: #666;
	text-align: left;
	line-height: 1.5em;
	font-style: normal;
	text-transform: uppercase;
	font-variant: normal;
	margin-bottom: 10px;
	font-weight: normal;
	margin-top: 0px;
}
h3 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	color: #666;
	font-weight: normal;
	margin-bottom: 7px;
	font-style: italic;
}

h4 {
	margin-bottom: 10px;
	font-weight: normal;
}
/* ===== header ===== */

div#header {
	height: 110px;
	width: 900px;
	position: relative;
	background-repeat:no-repeat;
}

div#headerLinks {
	float:right;
	padding-top: 20px;
}

#header #headerLinks p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12pt;
	color: #666;
}


/* ====== image placeholders ===== */

div#navPlace {
	width: 900px;
	height: 35px;
	background-color: #808285;
	
}

div#topDivider {
	width: 900px;
	height: 35px;
	padding: 11px 0px 3px 0px;


}


div#centralPlace {
	height: 135px;
	width: 900px;
	padding-top: 10px;
}

/* Assorted Page SubDivs */

div#leader1 {
	float: left;
	width: 220px;
	
}

div#leader2 {
	float: left;
	width: 220px;
	padding-left: 10px;
	
}

div#sitemapOne {
	float: left;
	width: 210px;
	
}


/* ====== three columns ===== */



div#threeColumns {
	margin-top:15px;
}


div#outerDiv {
	width: 900px;
	margin: 0 auto;
	text-align:left;
	height: auto !important;
	height: 100%;
}


div#leftColumn {
	position: relative;
	width: 185px;
	float:left;
}

div#middleColumn {
	width: 480px;
	float:left;
	text-align: justify;
	background-color: #FFF;
	padding: 15px 15px;
}

div#rightColumn {
	width: 191px;
	position:relative;
	float:right;
	text-align: center;
	background-color: #FFF;
	padding: 0px;
	margin-bottom: 40px;
}

/* ====== partner logo ===== */

div#partner {
	margin: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 35px;
	padding-left: 0;
}
#outerDiv #threeColumns #rightColumn #partner img {
}



/* ====== blog/contact button ===== */

div#blog {
	padding: 0;
	float: right;
	width:176px;
	margin: 15px 7px 15px 0px;
	
}

div#contact{
	margin: 15px 4px 15px 0;
	padding: 0;
	float: right;
	width:176px;
}

/* ====== social media links ===== */

div#social {
	position: relative;
	padding-top: 20px;
	padding-right: 32px;
	padding-bottom: 20px;
	padding-left: 0px;
}

#social p {
	vertical-align: bottom;
}

#social img {
	float: right;
	padding-left: 3px;
}

/* ====== float classes ===== */

.fltrt {
	float: right;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-top: 10px;
}

.fltleft {
	float: left;
	margin-top: 10px;
	margin-right: 10px;
}

/* ====== Links ===== */

a.graphic:link {
	color: #666;
	text-decoration: none;
	height: 20px;
	width: 150px;
	background-color: #EEE;
	margin-bottom: 2px;
	padding: 12px 10px 10px 5px;
	display: block;
	border-width: 1px 1px 1px 5px;
	border-style: solid;
	border-color: #0067AC;
}
a.graphic:visited {
	color: #333;
	text-decoration: underline;
}
a.graphic:hover {
	color: #0067AC;
}
a.graphic:active {
	color: #0067AC;
} 

a.product:link {
	color: #999;
	text-decoration: none;
	margin-bottom: 3px;
	padding-bottom: 3px;
	background-image: url(images/link_background.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 10px;
	margin-top: 3px;
	padding-top: 3px;

}
a.product:visited {
	color: #999;
	text-decoration: none;
	background-image: url(images/link_background.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 3px;
	margin-bottom: 3px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 10px;

}
a.product:hover {
	color: #0067AC;

}
a.product:active {
	color: #0067AC;

} 


a.trad:link {
	color: #0067AC;
	text-decoration: underline;
	text-align: left;
	margin: 0px 0px 10px;
	padding: 0px 0px 10px;
	font: 11px Verdana, Geneva, sans-serif;
}
a.trad:visited {
	color: #999;
	text-align: left;
	margin: 0px;
	padding: 0px;
	font: 11px Verdana, Geneva, sans-serif;
}
a.trad:hover {
	color: #0067AC;
	text-decoration: none;
	font: 11px Verdana, Geneva, sans-serif;
}
a.trad:active {
	color: #0067AC;
	text-decoration: none;
	font: 11px Verdana, Geneva, sans-serif;
} 


a.footer:link {
	color:#FFF;
	text-decoration: none;
}
a.footer:visited {
	color:#FFF;
	text-decoration: none;
}
a.footer:hover {
	color:#FFF;
	text-decoration: underline;
}
a.footer:active {
	color:#FFF;
	text-decoration: underline;
} 
#outerDiv #threeColumns #rightColumn #partner img {
	margin-top: 15px;
}
div#download {
	margin: 15px 4px 15px 0;
	padding: 0;
	float: right;
	width:176px;
}
#outerDiv #threeColumns #middleColumn ul li {
	font-family: Verdana, Geneva, sans-serif;
	font-style: normal;
	font-weight: normal;
	color: #666;
	line-height: 1.6em;
	padding-top: 0px;
	padding-bottom: 4pt;
	font-size: .7em;
}

.tablewhiteheads {
	font-family: Verdana, Geneva, sans-serif;
	color: #FFF;
	font-size: .7em;
	font-weight: bold;
	padding-left: 5px;
}
#outerDiv #threeColumns #middleColumn table tr td p {
	margin: 2px;
}
div#contactColumn {
	width: 524px;
	float:left;
	text-align: justify;
	margin-bottom: 40px;
	background-color: #FFF;
	padding: 15px;
}
div#missionColumn {
	width: 480px;
	float:left;
	text-align: center;
	margin-bottom: 40px;
	background-color: #FFF;
	padding: 15px;
}
#outerDiv #threeColumns #missionColumn p {
	font: 16px Cambria, Georgia, "Times New Roman", Times, serif;
	text-align: center;
	margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn h1 {
	text-align: center;
	margin-bottom: 10px;
}
#outerDiv #threeColumns #missionColumn p img {
	margin-top: 5px;
	margin-bottom: 5px;
}
div#siteMapColumn {
	width: 660px;
	float:left;
	text-align: justify;
	margin-bottom: 40px;
	background-color: #FFF;
	padding: 15px;
}

I use an SSI for the footer text, but I've tried removing this and it doesn't seem to make a difference.

Does anyone have any idea what's going on here? I just don't understand how it can behave so inconsistently in a singular environment.

Thanks!

Tim

Currently, my main content div has a repeated-y background. However, when my text doesn't span the entire window, it cuts off. Instead, I'd like it to stretch all the way down to my sticky footer. I'm no expert at CSS, and I'm stumped. I've searched all over and tried all sorts of fixes, but I just can't see the problem. Help? Thanks!

URL

CSS:
Code:

* { margin:0; padding:0; }     html, body, #wrap { height: 100%; min-height:100%;  /* thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */ /* and http://www.puremango.co.uk/2010/04/css-gradient/ */ /* fallback (Opera) */ background: #8cb6e9; /* Mozilla: */ background: -moz-linear-gradient(top, #8cb6e9, #e0effc); /* Chrome, Safari:*/ background: -webkit-gradient(linear, left top, left bottom, from(#8cb6e9), to(#e0effc)); /* MSIE */ filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0); }     body > #wrap {height: auto; min-height: 100%;}  #main { padding-bottom: 116px; height:100%; }  /* must be same height as the footer */  #contentwrapper { margin: 0 auto; height:100%; min-height:100%;  }  #content { background-image:url(containerbg.jpg); background-repeat:repeat-y; margin: 0 auto; width:1000px; height:100%; min-height:100%;   }  #footer { position: relative; margin-top: -116px; /* negative value of footer height */ height: 116px; background-image:url(layout/footer.png); width:100%; background-position:center; clear:both; }   /* CLEAR FIX*/ .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

HTML:
Code:

<body>     <div id="wrap">          <div id="main" class="clearfix">  </div>  <div id="contentwrapper"> <div id="content">   <p>Your website content here.</p>   </div>             </div>          </div>  </div>  <div id="footer"></div>  </body>

Hi

I was hoping someone could help me with a sticky footer layout. What I've got so far kind of works, but not quite perfectly.

Basically, I want the top & bottom of the container div to always be 20px from the edge, and for the footer to stick to the bottom of the container. I've kind of got it working, but because of the padding on the body there's always a scrollbar present, plus with some browsers, the footer only seems to stick when resizing the window from the corner.

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" >
<head>
    <title></title>
    
    <style type="text/css">
    	html {
    		height:100%;
    	}
    	
    	body {
    		padding:20px 0 20px 0;
    		background:#d9e7ea; 
    		margin:0px auto; 
    		font-size:11px; 
    		font-family:"Trebuchet MS", Verdana, Helvetica, sans-serif; 
    		color:#000;
    		height:100%;
    	}
    	
    	#wrap {
    		margin:0 auto; 
    		position:relative; 
    		width: 950px; 
    		min-height:100%;
    		background-color:Red;
    		overflow:hidden;
    	}
	
	#header {
		margin:0 20px;
		height:100px;
		background-color:Green;
	}
	
	#content {
		margin:0 20px; 
		padding-bottom:50px;
		background-color:#ffffff;
		background-color:Blue;
	}
	
	#footer {
		color:#000; 
		position:absolute; 
		bottom:0px;
		background-color:Yellow;
		height:50px;
		width:950px;
	}
    </style>
</head>
<body>
	<div id="wrap">
		<div id="header">
			header
		</div>
		<div id="content">
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
			content<br />
		</div>
		<div id="footer">
			footer<br />
		</div>
	</div>
</body>
</html>

Thanks for any help.

Hello!
I am new to dreamweaver CS3 and need help with these two things:

when I preview my site in IE my lightbox does not work.
And my sticky footer does not stick to the bottom of the page.

Please someone help me.

Thank you in advance!

First, I should share this fantastic piece of code for sticky footers (footer stays at the bottom even when content is short):

http://scott.sauyet.com/CSS/Demo/FooterDemo1.html

It works great for a liquid layout in FF and IE6.

However, for fixed width layout, the container is left justified instead of centering the container. See:

http://shawkey.com/stickyfooter/fixedlayoutstickyfooter.html

Anyone want to hack at this with Firebug and see if they can get the container to be centered?

Thanks!

I've dabbled with the display: table properties for awhile, and I've looked forward to the time I could use them at work. Equal height columns! No more faking it with extra wrapper div's and background images!

As we're finally rolling out IE8 at work, I decided to take a pretty typical layout that I would have laid out years ago in a table. Header, footer, nav and content, that is always at least the height of the page and will expand with more content:

http://www.richarddoyle.net/tests/css_table/table.html

This could be done using floats, background images, etc, but I wanted to take advantage of what display: table could offer me. So I tried to recreate the same layout. I knew there was no colspan in CSS, but I was sure I could get it to work somehow.

My first attempt showed the colspan issue:

http://www.richarddoyle.net/tests/css_table/cssversion1.html

My second attempt I couldn't get the page to match at least the height of the browser:

http://www.richarddoyle.net/tests/css_table/cssversion2.html

Is this just impossible to do with display:table properties? Is there some mixture of table properties and sticky footer code that can make this work?

I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it.

<!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">
<!--
#headerDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:219px;
z-index:1;
background-image:url(images/header_bg.jpg)
}
#leftcontentDiv {
position:absolute;
left:0px;
top:0px;
width:50%;
height:219px;
z-index:2;

}
#headermenuDiv {
position:absolute;
width:263px;
height:19px;
z-index:2;
margin-top:5px;
margin-left: 10px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
left: 26px;
}
#rightcontentDiv {
position:absolute;
right:0px;
top:0px;
width:50%;
height:219px;
z-index:2;
}
#logoDiv {
position:absolute;
left:0px;
top:0px;
width:511px;
height:101px;
z-index:2;
background-image:url(images/ogo.jpg)
}
#searchDiv {
position:absolute;
left:90px;
bottom:0px;
width:330px;
height:42px;
z-index:2;
background-image: url(images/search.jpg);
}
#logosearch_containerDiv {
position:absolute;
left:1%;
top:25px;
width:511px;
height:146px;
z-index:2;
}
#signupDiv {
position:absolute;
width:212px;
height:19px;
z-index:2;
margin-top:5px;
right:5px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
}
#loginDiv {
position:absolute;
right:0px;
top:24px;
width:233px;
height:119px;
z-index:2;
background-image:url(images/login.jpg)
}
#bodytopDiv {
position:absolute;
left:0px;
top:219px;
width:100%;
height:401px;
z-index:2;
}
#photoDiv {
position:absolute;
left:0px;
top:0px;
width:589px;
height:349px;
z-index:3;

}
#titlecontainerDiv {
position:absolute;
right:2px;
top:0px;
width:50%;
height:349px;
z-index:3;
text-align: left;
}
body {
text-align: center;
}
#bodytopbottomDiv {
position:absolute;
left:0px;
top:348px;
width:100%;
height:51px;
z-index:3;
background-color: #0361C1;
}
#bodytopDiv #bodytopbottomDiv table {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 12px;
}
#newalbumsDiv {
position:absolute;
left:0px;
top:620px;
width:301px;
height:301px;
background-image: url(images/newalbums.jpg);
}
#topalbumsDiv {
position:absolute;
left:318px;
top:620px;
width:301px;
height:301px;
background-image: url(images/topalbums.jpg);
}
#videosDiv {
position:absolute;
left:636px;
top:620px;
width:386px;
height:301px;
background-image: url(images/videos.jpg);
}
#lowerbodycontainer {
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
}


-->
</style>
</head>

<body>

<div id="headerDiv">
<div id="leftcontentDiv">
<div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div>
<div id="logosearch_containerDiv">
<div id="logoDiv"></div>
<div id="searchDiv"></div>
</div>
</div>

<div id="rightcontentDiv">
<div id="signupDiv">New User? Signup | New Artist? Sign up</div>
<div id="loginDiv"></div>
</div>
</div>

<div id="bodytopDiv">
<div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div>
<div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div>
<div id="bodytopbottomDiv">
<table width="777" border="0" align="center" cellspacing="10">
<tr>
<td width="145">text goes here</td>
<td width="150">text goes here</td>
<td width="126">text goes here</td>
<td width="161">text goes here</td>
<td width="125">text goes here</td>
</tr>
</table>
</div>
</div>
<div id="lowerbodycontainer">
<div id="newalbumsDiv"></div>
<div id="topalbumsDiv"></div>
<div id="videosDiv"></div>
</div>


</body>
</html>

Hello,

I just joined the forum, I'm new to web design although I have some experience in video post production.

I'm attempting to create a layout for a website using sticky footer technique and an image for the border shadow in the main column.
The sticky footer works well until I tweak the css to add the background border image, then I get this empty space in the middle of the body where the border image background should be extending to.

It's probably a novice mistake but I can't get to find it. Your help would be much appreciated.
The HTML:

Code:

<body>

<div id="nonFooter">
		<div id="wrapShadow">
		<div id="header">
				<div id="linksHead"></div>
		<div id="mainMenu"></div>
		</div>		
			
		
		<div id="content">
<div id="bannerSlider">  (SWF file)
</div>
			<div id="contentBuscador">
			</div>
			<div id="contentTours">
			</div>
			<div id="contentElite">
			</div>
			<div id="contentTestimonios">
			</div>
			<div id="contentPromos">
			</div>
		</div>
	</div>
</div>
	<div id="footer">
		<div id="wrapShadowFooter">
		</div>
		</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
	</script>
</body>

The CSS:
Code:

html,body {
	padding: 0;
	margin: 0;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-color: #3399cc;
}

#nonFooter
{
	position: relative;
	min-height: 100%;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

* html #nonFooter
{
	height: 100%;
}

#content
{
	padding-bottom: 7em;
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	clear: both;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #336;
}
#header {
	width: 900px;
	height: 100px;
	position: relative;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#footer
{
	position: relative;
	margin-top: -6em;
	height: auto;
	background-image: url(_images/shadow920x1ver3.gif);
	width: 920px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
} 
#wrapShadow {
	width: 920px;
	margin: 0px;
	padding: 0px;
	height: auto;
}
#wrapShadowFooter {
	width: 900px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding: 0px;
	background-image: url(_images/footerCruiseship.jpg);
	background-repeat: no-repeat;
	float: left;
	height: 100px;
}

All #content(area) Divs in content have the same code as this:
#contentBuscador {
	float: left;
	height: 100px;
	width: 880px;
	padding: 0px;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 10px;
}

Thank you,
pixelMason.

Edit: Problem Solved thanks to f_nietzsche

Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content.

Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this?

Here's my css:

#container{
position:relative;
height:100%;
width:780px; }

#footer {
position: relative;
top: 0px;
left: 0px;
clear:both;
}

Hi

I'm having a bit of trouble with a DIV/CSS layout - 2 DIVs are inside a 100% height 100% width container DIV. The first (top) DIV is the content and the second (bottom) DIV being a 100% width 240px height footer DIV.

I can make the footer stick to the bottom of the page and display fine no problem, however, I am having trouble getting the content div to fill only the area above the footer. If I specify a 100% height for it then it extends the entire height of the page and content disappears behind the footer. Plus, I want to absolutely center the content in the space above the footer, not the absolute center of the whole page, which is all i am acheiving with 100% height!

Basically, I need the content DIV to extend 100% then subtract the 240px height of the footer - I suspect it's not wise to mix px and %, however.

I have attached an image to help with my probably confusing explanation!

I do have a workaround using tables, which I would ideally like to avoid, particularly as it does not support IE6/7 browsers.

If a solution can be acheived which uses JavaScript to format the DIVs, then I am open to any suggestions anyone may have.

Thanks
R

I cannot get the footer to sit at the bottom of the page when I use absolute positioning. I need the #main to stretch to whatever the content height and the footer to sit underneath. I know its fairly easy to achieve with relative positioning but I need absolute positioning for for other elements. Can anyone help?


html, body {height:100%;}

#container {
width: 900px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
}

#header {
width: 900px;
height: 105px;
position: absolute;
left:0;
top: 0;
}

#main {
position: absolute;
left:0;
top: 105px;
}

#footer {
position:absolute;
bottom:0;
border: 1px solid yellow;
}

I am trying to display a footer below two absolute divs and whatever is the default.
[absolute][default][absolute]
[ FOOTER ]

Any suggestions or tutorials?

Whatever I try will put the footter below the default center and it will then apear under the two divs aligned absolute. Or if the center column is longer it will be below the divs. (Do I make any sense

http://cheers-sendai.com/fluidframe.htm has a great and simple example of 3 cols (OK, 2 cols in the middle section makes "4 cols"), header and sticky footer, where the middle col has overflow:auto so it can be scrolled. GREAT example, I think (due to the use of bg colors, etc.).

The left/right/width values of the divs are manipulated so that the middle section runs from 10% to 90% and the left/right divs fill in accordingly.

I'd like to be able to set, for example, the left and right divs to be 150 px wide (NO percentages!) and have the middle section stretch between them (regardless of viewport width) and be able to be scrolled, too.

The problem I see is that most examples use percentages. I can set the left div to be a fixed width, then set the middle section left coord. to be, say, 150px, but then I need to set its width to stretch to "150 to the left of the right side of the viewport" and I don't know how to do this.

Thanks.

I have a single column CSS layout with a "sticky" footer.

In the main column, I have a two column block resulting in a sidebar / main content set-up.

Without the two-column block, the stick footer works fine. I can fill the page with 1000 lines of text, simple content DIVs, whatever.

But the two-column block breaks it.

See it he

http://siliconsatan.com/test.php

Can't figure out why (I'm a CSS noob, it's probably obvious)

Any ideas?