DIV problems in Firefox.

This is my site: [URL=”http://goodbyealice.com”]http://goodbyealice.com[/URL].

If you look at it in IE, it looks like I want it to. The background is grey, and the container DIV that holds everything has a white background.

In FF however, the white background doesn’t go further down than the header image, it doesn’t go to the bottom of the page like in IE, and I don’t understand why. It holds all the other divs, so it should stretch with the others, right?

This is my CSS:

[code]
#container {
margin: 0px auto;
width: 700px;
height: auto;
background-image:url(‘http://goodbyealice.com/wp/img/bg.jpg’);
background-repeat: repeat-y;
background-color:#ffffff;
padding: 25px;
padding-top: 0px;
}

.layout{
position: relative;
left: -65px;
}

.blog{
width: 450px;
text-align: left;
float: right;
position: relative;
top: -100px;
}

.side {
width: 195px;
float: left;
text-align: justify;
position: relative;
left: 15px;
top: -30px;
}[/code]

The page structure is:

CONTAINER DIV

/DIV

I tried everything I could think of (which admittedly isn’t much), and when I take out the ‘float’ from the blog/side div, it works – but I need it to align the divs. It also works if I assign a height in pixels to the container, but that’s not really a solution..

Help?

Also in #CSS _↴