Absolute positioning: One element expands window, other element doesn't affect it. Both use same code :C

Question

I added two divs to hold background images for decorative purposes - as requested by the artist whom is working with me on a website.

At first, it worked very well. The images were supposed to show on each side of the wrapper div holding the website content - without affecting page width.

Then the organization owning the website got another sponsor, who's logo I had to add to a column on the right. I created a new id for the 5th "button" and created a div for it. Uploading it, I noticed that a scroll bar had suddenly appeared on the bottom of the page, for no apparent reason.

I first suspected the button to be the problem, but eventually found out that the right-most decorative div was bending the page width, despite using absolute positioning. Both of the divs use the same code, only mirrored for left and right. I have no idea what is causing the problem..

(You can see the problem in action while it lasts at www.torucon.no/no/)

Please help me out! Here is the CSS for both of the divs:

#wolf
{
position:absolute;
min-height:500px;
min-width:498px;
left:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/wolf.png');
z-index:-1;
}

#lion
{
position:absolute;
min-height:500px;
min-width:498px;
right:-293px;
top:150px;
background-image:url('http://www.torucon.no/css/lion.png');
z-index:-1;
}

Here is an HTML snippet showing the HTML of the divs:

<div class="wrapper"> <!-- Contains the entire website for structure --> 
<div id="wolf">
</div>
<div id="lion">
</div>

((In case you didn't get it: The wrapper div is supposed to be centered, and it is. But when I resize my window, I find that a scroll bar appears long before the wrapper content is even close to the browser window borders. That would be annoying on computers with low resolution or small screens!))

Answer 1

I think what you want is to have the lion and wolf progressively appearing as the user widens the browser viewport, but otherwise partially hidden off to the sides of the wrapper. Correct?

I think you're only safe option to achieve this without triggering the scrollbars you don't like are to combine the images into one and attach them as the background image on the body element of the page.

I believe you're right about using overflow-hidden on the body -- you'd loose the ability to scroll to see overflowed content if the viewport is resized down below the wrapper's width.