tags:

views:

374

answers:

2

Hi.

Picture a site with a banner of varying height at the top of a page,

Below that, div#wrapper-inside inside div#wrapper
#wrapper-inside is of fixed width and centered
#wrapper has a big background-image

Now. When the browser viewport width is smaller than our #wrapper-inside, we get a nice horizontal scrollbar, and when we scroll to the left, you'll notice that #wrapper's width stays the same as the browser viewport width.

The problem is that #wrapper scrolls along and the background-image gets cut off.

Can this be fixed with css alone, if not, jQuery?

+1  A: 

What about setting #wrapper min-width to the same fixed width as the wrapper-inside.

Tim
Works like a charm. Thanks!IE6 users already get a big fat update warning, so to heck with them.
tdskate
A: 

it can be done with only css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <style>
   #wrapper {
    overflow: auto;
    background-image: url('http://fc05.deviantart.net/fs50/f/2009/340/b/0/Me_by_dicabrio.png');
   }
  </style>
 </head>
 <body>
  <div id="header">
   bla bla
  </div>
  <div id="wrapper">
   <div id="wrapper-inner" style="width: 2000px; border: 1px solid black;height: 100px; color: white;">
test;test;test;test;test;test;test;test;test;test;test;test;test;test;test;
   </div>
  </div>
 </body>
</html>
Robert Cabri