Auto Stretch Page Height for content - please help?

I've been pulling my hair our over this one for several weeks and i am begging for some help.

I'm trying to get this page to auto stretch for height (please don't worry about the gimpy images - thats an easy solution).

http://sg.canyonchasers.net/homepage.html

But the main problem is the footer - it doesn't put itself at the bottom of the content. But seems to be attached to the bottom of the browser somehow. I'm so confused.

I think it has something to do with the /** PAGE */ and /** CONTENT */ of my layout.css files.

Any help at all would result in eternal gratitude, attribution in the CSS code and my first born. (i really am that desperate).

Thanks for any help!

dp

 

Without seeing the CSS I can't be sure but I'd bet you don't have all the containers floated and inside a master container that's also floated.

 

Sorry. I forget that not everbody uses Firefox web developer toolbar.


Here's the layout.css

/** BASIC */

html, body {
	height: 100%;
}

/** HEADER */

#header {
	width: 778px;
	height: 190px;
	margin: 0px auto;
	background: url(images/homepage02.jpg) no-repeat left top;
}

#header h1, #header p {
	margin: 0px;
	text-indent: -9999px;
}

/** MENU */

#menu {
	width: 778px;
	height: 45px;
	margin: 0px auto;
}

/** PAGE */


#page {
	width: 778px;
	height: 50%;
    min-height: 400px;
	margin: 0px auto;
}

#bg-left, #bg-right {
	float: left;
	width: 86px;
	height: 100%;
   
}

#bg-left-tp, #bg-right-tp {
	float: left;
	width: 86px;
	height: 100%;   
}

/** CONTENT */

#content {
	float: left;
	width: 606px;
	height: 75%;
	padding-top: 40px;
}

/** 3-COLUMN LAYOUT */

.three-columns {
}

.three-columns .column1,
.three-columns .column2,
.three-columns .column3 {
	float: left;
}

.three-columns .column1 {
	width: 228px;
	padding: 0px 0px 0px 35px;
}

.three-columns .column1 .wrap {
	width: 196px;
}

.three-columns .column2,
.three-columns .column3 {
	width: 150px;
	padding: 0px 0px 0px 20px;
}

.three-columns .column2 .wrap,
.three-columns .column3 .wrap {
	width: 120px;
}


/** 2-COLUMN LAYOUT */

.two-columns {
}

.two-columns .column1,
.two-columns .column2,
.two-columns .column3 {
	float: left;
}

.two-columns .column1 {
	width: 386px;
	padding: 0px 0px 0px 47px;
}

.two-columns .column1 .wrap {
	width: 350px;
}

.two-columns .column2 {
	width: 150px;
	padding: 0px 0px 0px 20px;
}

.two-columns .column2 .wrap {
	width: 120px;
}

/** 1-COLUMEN LAYOUT */

.one-column {
}

.one-column .wrap {
	padding: 0px 30px 0px 50px;
}

/** FOOTER */

#footer {
	width: 778px;
	height: 190px;
	margin: 0px auto;
}

Code (markup):

Thanks!

dp

 

Let me guess. You want a 100% document height model with a sticky footer that will stay at the bottom if there isn't enough content to push it over the fold? If so, then read this. You can see a live example at www.dan-schulz.com/for-others/ethics/template.html

The folder is open so you can just grab the files and go.

 

The rule is "A family that floats together, sticks together". Well, that's not actually a rule but you should get the point.

Because footer isn't floated, it's not part of the family. So, just float it and make sure it's inside the same floated content container with the other stuff, and it'll all work together.

IE will need a little help on floated layouts like these. Start your floated content container off with a clear and end it with a clear. Add other extra clears where needed, but IE needs these two.

Now you can tile a background in content for dynamic height and it'll go all the way to the bottom of footer.

Sometimes it helps to add a border around things while in the design stage to see what's going on. Background colors are better because they don't alter dimensions but with background images borders would work better.

 

Classic example and very resourceful.

 

Well, I don't really want the footer to sit at the bottom of the browser page - more that i want it to sit at the bottom of the content. Kinda like this quick hack.

http://j.cc.moose.cc/

Only with the groovy graphic side banners in this one;

http://sg.canyonchasers.net/homepage.html


I should also say that in IE, the footer sits on top of text, but in Firefox the text just goes over the top of the footer on its happy little way.

Thanks for the help so far!
dp