Well I think the float blocks cause this problem because on other pages where they don't exist the layout looks fine...
So take a look:
internet explorer preview
There are problems in both - FF and IE...
In FF the background behind floats isn't repeating.
In IE it isn't centered.
I validate it and still it won't work properly...
Could someone please explain me these issues ?
IE is incorrect. You haven't contained/cleared your floats.
For the time being, add
and see if it fixes it.
What do u mean I haven't cleared the floats ?
I just added <div style="height: 0px; line-heigh: 0px; clear: both;"></div> before closing the wrapper div... they are cleared now, right?
I've removed the width of the clearer div because it was wrong and it looks fin in IE now...
When I add overflow: auto the background is displayed but 2 scrollbars are also displayed :/
The overflow:auto; is a check to see if floats aren't being cleared. Since the bg color shows through, then it's a clearing problem.
If you want to stick with your solution, then remove the overflow:auto; and it will work. On the other hand, you could look up other clearing solutions, such as Tony Aslett's clearfix on this site.