Question

I hope this helps explain the issue I am having

I have recently designed a horizontal scrolling portfolio for a client, the rights and wrongs of horizontal web design, is a sligtly seperate topic but alas the client wanted something different.

Im having a real issue with the bottom div though As the monitor size is reduced its creating the browser scroll bar down the side as the div image is overlapping the monitor size.

Wouldnt be such a huge issue but because of the nature of the horizontal site its producing a diagional scrolling effect.

Is there away to prevent the screen expanding from the actual monitor size using css or anyother solution? I’m probably staring at the answer as I type but brain doesnt seem to be working unfortunately.

Answer 1

Assuming the content area is flexible in height and the background div is a fixed height, then this should solve it (prevents content area from ever being bigger than browser height). For purposes here I’ll assume you have some way of targeting those div’s:

html {height: 100%;}
body {height: 100%; position: relative;}    
#content {position: absolute; top: 0; bottom: (whatever the height is of your bottomBkg);}
#bottomBkg {position: absolute; bottom: 0; left: 0;}

The combined top/bottom on the #content won’t work in older browsers if that is a concern for you.