Background Colour Problems

Hi,

I am currently designing a bit of a blog site from scratch and I've created a design which looks fine in IE6, however in Firefox 2 the DIV called "content" which has lots of nested DIVs in it with the content is not stretching with the content inside it.

Please have a look at http://www.awdigital.com/adam/ in both browsers or just Firefox so you can see the problem. The pinky coloured background behind the main content should reach right to the bottom where the footer is.

Any ideas on how to fix this?

I've tried moving stuff around and all sorts but I just can't figure this one out.

Many thanks

Adam

Simple solution:
Design one main site,
and then, for browsers that have problems with it, make a browser spcific ones.

Then use JavaScript to decect browsers and re-direct.

That is certainly an option, however I'm not convinced that it isn't just a mistake I've made with the coding because I'm sure at one stage during development it looked fine in both browsers.

Would using the Z-INDEX attribute in the DIV tags make a difference, because it's almost like whilst the DIV's are nested inside the main content DIV, they are floating above it so the content DIV isn't stretching to accommodate them?

Thanks for your help so far.

Ad

you should always have a z-index for a div.
Unless it's a generic <div> tag.

ive added z-index:1; to all of the div tags, but it makes no difference.

Any other ideas?

Cheers

By the way I changed the url of the site to http://www.awdigital.com. Cheers