Page cutting off on lower resolutions

Good day. I am not sure what I can do about this issue. If you go here: you will see that the page shows fine on a screen resolution larger than 1024x768. However, when you view it at the 1024x768 res. part of the right side of the page is cut off, forcing you to scroll horizontal to the right. The way it is layed out is the navigation bar and the big white box with all the content in it, is set in a container with a width of 1024px. The graphics around that container have a separate container with a width of 1400px (which is where the problem is). So the 1024px container is sitting inside of the 1400px container. I did this so that the layout would stick together and not “break”. Any suggestions on how to solve my 1024x768 screen resolution issue would be greatly appreciated.


Why don’t you apply that background to the middle of a 100% container instead and let it slide off to the side.


#maincontain {
background:url("images/background.jpg")  no-repeat [B] 50% [/B]0 transparent;

You will need a min-width of 1024px to stop it at the edge but it won’t work in IE6 though as it doesn’t understand min-width.

The height:100% along with overflow:hidden is an accident waiting to happen (see faq on 100% height). If 100% worked in that position then you would find that any content that goes below the fold would be hidden. Luckily for you you have a form container around the page and therefore the height:100% isn’t working and defaults to auto.

If the form is your page wrapper then you could use that instead of maincontain and apply the image to that instead and save a div.

background:url("images/background.jpg")   no-repeat  50% 0 transparent;

* html form#maincontain{height:100%;overflow:visible}

Thanks for the reply! That makes sense.

Much appreciated bud!