Hi guys.Im new to CSS and having a problem with my footer at the moment basically when I insert content past the footer it doesnt expand to suit as it is absolutely position.

I looked up other posts on the situation and tried to apply a sticky footer but as I understand I have problems because the rest of the site is absolutely positioned and the footer goes straight to the top of the page.
But if I remove all or some of the positioning the footer(.ts-1-27) sticks but the page falls apart. I just dont understand this at all yet.

How can I fix this and can I get some insight into how it works or doesnt work in my case.

Thanks for the help.
Sorry for posting about footers as I can see its been discussed often.

Link to page and html source http://hyperaustralia.terryscarr.com/template2.html

and css layout. (footer is .ts-1-27)

@charset "utf-8";
/* CSS Document */	
		.ts-1 {
	height: 660px;
	text-align: left;
	width: 801px;
	outline-style: solid;
	outline-width: 1px;
	outline-color: #000000;
}

.ts-1-1 {
	border: none;
	height: 20px;
	left: 0px;
	padding: 0px;
	top: 0px;
	width: 800px;
	position: relative;
}

.ts-1-3 {
	background: url(images/Header.jpg) no-repeat left center;
	border: none;
	height: 127px;
	left: 0px;
	line-height: 127px;
	padding: 0px;
	top: 20px;
	width: 800px;
}

.ts-1-5 {
	border: none;
	height: 27px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 142px;
	width: 581px;
	padding-left: 25px;
}

.ts-1-6 {
	background: url(images/hand-right.jpg) no-repeat left center;
	border: none;
	height: 27px;
	left: 581px;
	line-height: 27px;
	padding: 0px;
	position: absolute;
	top: 147px;
	width: 55px;
}

.ts-1-7 {
	background: url(images/col-right2.jpg) no-repeat left center;
	border: none;
	height: 149px;
	left: 636px;
	line-height: 149px;
	padding: 0px;
	position: absolute;
	top: 147px;
	width: 14px;
}

.ts-1-8 {
	background: url(images/col-right1.jpg) no-repeat left center;
	border: none;
	height: 130px;
	left: 650px;
	line-height: 130px;
	padding: 0px;
	position: absolute;
	top: 147px;
	width: 150px;
}

.ts-1-10 {
	border: none;
	height: 401px;
	left: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	top: 169px;
	width: 40px;
}

.ts-1-11 {
	border: none;
	height: 401px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 169px;
	width: 596px;
	padding-left: 40px;
}

.ts-1-13 {
	border: none;
	height: 38px;
	left: 650px;
	line-height: 38px;
	padding: 0px;
	position: absolute;
	top: 272px;
	width: 150px;
}

.ts-1-15 {
	border: none;
	height: 279px;
	left: 636px;
	line-height: 279px;
	padding: 0px;
	position: absolute;
	top: 291px;
	width: 14px;
}

.ts-1-17 {
	background: url(images/col-right.jpg) no-repeat left center;
	border: none;
	height: 9px;
	left: 650px;
	line-height: 9px;
	padding: 0px;
	position: absolute;
	top: 310px;
	width: 150px;
}

.ts-1-19 {
	border: none;
	height: 69px;
	left: 650px;
	line-height: 69px;
	padding: 0px;
	position: absolute;
	top: 319px;
	width: 150px;
}

.ts-1-21 {
	background: url(images/col-right-09.jpg) no-repeat left center;
	border: none;
	height: 11px;
	left: 650px;
	line-height: 11px;
	padding: 0px;
	position: absolute;
	top: 388px;
	width: 150px;
}

.ts-1-23 {
	border: none;
	height: 40px;
	left: 650px;
	line-height: 40px;
	padding: 0px;
	position: absolute;
	top: 399px;
	width: 150px;
}

.ts-1-25 {
	border: none;
	height: 131px;
	left: 650px;
	line-height: 131px;
	padding: 0px;
	position: absolute;
	top: 439px;
	width: 150px;
}

.ts-1-27 {
	border: none;
	height: 89px;
	left: 0px;
	padding: 0px;
	width: 800px;
	position: absolute;
	top: 570px;
}

First, get rid of all that absolute positioning, it's just not necessary and you're needlessly complicating things. IE6 in particular has some major bugs with it.

Use the normal document flow and getting your footer to stay at the bottom will cause you far fewer headaches.

How about negative values and relative positioning. Would that do what I want?
As I have removed all of the absolute positioning and and changed the order of the document flow(I think) and everything seems to want to display in order along the left hand side of the page.
Is there an attribute I am missing that could cause this as adjusting the left or right value seems to be doing nothing.

How about this. It seems ok to me but Im not sure about the gap above the footer.
http://hyperaustralia.terryscarr.com...template2.html
*edit- Sorry forgot the code.

@charset "utf-8";
/* CSS Document */	
		.ts-1 {
	width: 800px;
}

.ts-1-1 {
	border: none;
	height: 20px;
	left: 0px;
	padding: 0px;
	width: 800px;
}

.ts-1-3 {
	background: url(images/Header.jpg) no-repeat left center;
	border: none;
	height: 127px;
	left: 0px;
	padding: 0px;
	width: 800px;
}

.ts-1-5 {
	border: none;
	height: 27px;
	left: 0px;
	padding: 0px;
	top: 142px;
	width: 581px;
	padding-left: 25px;
	top: 142px;
}

.ts-1-6 {
	background: url(images/hand-right.jpg) no-repeat left center;
	border: none;
	height: 27px;
	padding: 0px;
	width: 55px;
	float: right;
	top: -27px;
	position: relative;
}

.ts-1-7 {
	background: url(images/col-right2.jpg) no-repeat left center;
	border: none;
	height: 149px;
	padding: 0px;
	width: 14px;
	float: right;
	top: -27px;
	position: relative;
}

.ts-1-8 {
	background: url(images/col-right1.jpg) no-repeat left center;
	border: none;
	height: 130px;
	padding: 0px;
	width: 150px;
	float: right;
	top: -27px;
	position: relative;
}

.ts-1-11 {
	border: none;
	left: 0px;
	padding: 0px;
	width: 596px;
	padding-left: 40px;
	text-align: left;
	position: relative;
	top: -170px;
}

.ts-1-13 {
	border: none;
	height: 38px;
	padding: 0px;
	width: 150px;
	left: 650px;
	position: relative;
	top: 100px;
}

.ts-1-17 {
	background: url(images/col-right.jpg) no-repeat left center;
	border: none;
	height: 9px;
	padding: 0px;
	width: 150px;
	left: 650px;
	position: relative;
	top: 100px;
}

.ts-1-19 {
	border: none;
	height: 69px;
	padding: 0px;
	width: 150px;
	left: 650px;
	position: relative;
	top: 100px;
}

.ts-1-21 {
	background: url(images/col-right-09.jpg) no-repeat left center;
	border: none;
	height: 11px;
	padding: 0px;
	width: 150px;
	left: 650px;
	position: relative;
	top: 100px;
}

.ts-1-23 {
	border: none;
	height: 40px;
	padding: 0px;
	width: 150px;
	left: 650px;
	position: relative;
	top: 100px;
}

.ts-1-27 {
	border: none;
	height: 89px;
	left: 0px;
	padding: 0px;
	width: 800px;
}

I still cant seem to figure out that gap above the footer and below the content.
Im guessing its might be a build uo affect of my relative positioning.
Can someone please confirm this. So I know to go back to the start or am I on the right track.

Ok, look, you don't need to position everything at all. Learn to use floats and put elements where you want them with margins and padding, and only use positioning when you absolutely have to. In most cases, for most layouts, you don't need it at all except on the main 'container' div.

I must say that you are really complicating things for yourself. You appear to be still thinking in tables with a div for every element, so you have a wicked case of div-itis going on there. Going from tables to non-tables requires a shift in the way you think about a layout.

You might want to read thru this: www.cssslicingguide.com

I'll see if I can help you work this out.

Originally Posted by LadynRed

Ok, look, you don't need to position everything at all. Learn to use floats and put elements where you want them with margins and padding, and only use positioning when you absolutely have to. In most cases, for most layouts, you don't need it at all except on the main 'container' div.

I must say that you are really complicating things for yourself. You appear to be still thinking in tables with a div for every element, so you have a wicked case of div-itis going on there. Going from tables to non-tables requires a shift in the way you think about a layout.

You might want to read thru this: www.cssslicingguide.com

I'll see if I can help you work this out.

Thanks for the words of wisdom LadynRed Im pretty sure I know whats going on now although it took abit hair tearing to get one very non-understanding div to co-operate.
I re sliced the layout to suit roughly to what the slicing guide said and everything seemed to fall into place.
I love to hear that this is right know or at least good enough. lol.
Thankyou.
http://hyperaustralia.terryscarr.com.../template.html

@charset "utf-8";
#container{
	position:relative;
	width:800px;
	text-align:center;
	margin:0 auto 0;
	outline-style: solid;
	outline-width: 1px;
	outline-color: #000000;
	background: url(images/bg.jpg) repeat;
}

.header {
	background: url(images/header.jpg) no-repeat left center;
	height: 127px;
	left: 0px;
	width: 800px;
}

.nav {
	height: 27px;
	width: 561px;
	float: left;
	margin-left: 20px;
}

.rcoltop {
	background: url(images/rcoltop.jpg) no-repeat left center;
	border: none;
	height: 27px;
	width: 219px;
	float: right;
}

.rcolbot {
	background: url(images/rcolbot.jpg) no-repeat left center;
	border: none;
	height: 357px;
	padding: 0px;
	width: 164px;
	float: right;
}

.content {
	width: 589px;
	margin: 0 5px 0 40px;
	text-align: left;
	line-height: 12pt;
	float: left;
}

.footer {
	background: url(images/footer.jpg) no-repeat left center;
	height: 36px;
	left: 0px;
	width: 800px;
	margin-top: 10px;
}

.clear {
clear: both;
}

#blackman {
position: relative;
top: 150px;
left: 7px;
}

#musclebeach {
position: relative;
top: 153px;
left: 7px;
}

#carbocage {
position: relative;
top: 156px;
left: 7px;
}

Much, much, much better !!
It can be challenging to go from tables to table-less layouts, it does require a shift in the way you think about your layouts, but in the end, it's a lot easier because you don't have to slice images into a bunch of little boxes

Good job!

Awesome thankyou.
That was the problem I was just trying to make it easier and use the slices I already had, but it just made it harder.
I will definitely make sure the next site I build starts out as a css layout.
It really is alot easier to work with than tables once you get the idea..