I have a container div that wraps my entire website. I did this in order to have a two-background feel of sorts: body{} has a repeat-x background at the top, and #container has a background that should always show up in the bottom left corner of the page.

Now, obviously, we run into the 100% height issue. I've tried tons of tricks I've found online. Right now, I've got a class on div#container called .floatfix. Here's the CSS as of right now:

Code:
body{
margin: 0px; 
padding: 0px;
background: #f7f6af url(imgs/bot1.gif) no-repeat bottom left;
font-family: tahoma, arial, georgia, times;
font-size: 1em;
color: #1C2124;}

html, body{
height: 100%;}

#container{
width: 100%;
min-height: 100%;
background: transparent url(imgs/bg.gif) repeat-x top;
padding-bottom: 0px;}

	.floatfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
	
	* html .floatfix {
	height: 1%;}
And, as of right now, the above is not working. You can take a look at the actual site: http://www.alexjewell.com/beta3. The Portfolio and Contact pages are the ones that specifically display the error - the background for #container stops where the actual window view stops on load, and stays there even if the page scrolls/the content overflows.

Any wisdom? I've tried a bunch of stuff and none of it has really worked. Thanks.