Container Div and Content Not Agreeing.

[alexjewell]

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:



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.