Website layout problems :-(

Hi,

I was wondering if anyone could lend me a hand?

Im having a right pain sorting out some layout problems with firefox

my site

appears to work fine in IE7, however im having some issues with firefox, i think its something to do with clearing the divs.

Any help would be greatly appriciated!

the site is contained within 3 different sections:

header
maincontent
footer

for each of these sections i have a background image assigned.

the header and footer background appear to load fine. however the main content background doesnt load in firefox and when in IE it moves (when the browser window is minimised) i want the content background to remain fixed however each page has a different height so i cant set a aprticular height...

Also with firefox the maincontent background doesnt load properly. i have two divs located within it which are floated. i have tried clearing them however it results in problems.

Anyone willing to help me? i have spent ages creating this site and just need some help debugging it.

Cheers, Ben.

i have made some slight progress:

the new version can be seen here

my issues now are that its not aligning properly in the centre like in IE and the sections arent joined properly.

if i make an ammend for firefox it will upset IE any ideas?

Cheers, Ben.

Hard to say without looking the code closer but you could try to wrap your entire page with a div, called wrapper or whatever you would like and then center that element. Then your header, main, footer will all be within that wrapper. So put the tag right after the opening body tag and the closing tag at the end. Then your css would have this rule:

#wrapper {
margin: 0 auto;
width: whatever you want here;
}

Hi DD89,

Thanks for your reply.

I added a wrapper and it seemd to have sorted it out a bit.

The site is now centered in both firefox and ie, however it adds horizontal scroll bars which i dont want. this problem is explained below.


There is a horizontal scrolling issue, can you see what i mean? i only want the width of the header, main content and footer to occupy the scrollable width. As they are set to 760 pixels and scroll bars shouldnt appear.

The background sections on the side should not effect the pages horizontal size. ie they should be in the background. they make the width up to around 940 pixels.

This is the site with the wrapper fix:


Any idea how i can solve the scrolling isuues so that the main content of my site will be displayed on 800x600 resolutions?

Here is my css code:



and here is my html:



Any help would be grately appriciated, i think next time i will design for firefox then fix for ie!

Thanks for your help, ben

can anyone offer me any help on this?

i still cant figure it out