1

html

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

css

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

This code centers my background image nicely, except when my browser gets narrower than the 960px width of #inner. In this narrow-browser case, #inner and #outer maintain their 960px width as expected (giving a horizontal browser scroll bar), but the background image on #outer centers itself to the browser window instead of the #outer div. How can I maintain the background image to be centered to the div instead of to the browser window?

Sean
  • 369
  • 1
  • 4
  • 15
  • Example, notice how image stays on screen even though outer div goes off right side of screen. http://jsfiddle.net/5Kn7s/ – mrtsherman Nov 12 '11 at 02:44
  • Actually this is really weird - http://jsfiddle.net/5Kn7s/1/ Note the red border. The outer div isn't growing along with its child container??? That is why the image stays centered on screen. – mrtsherman Nov 12 '11 at 02:52

1 Answers1

0

I actually don't know the true answer to why this is happening, but if you apply a width to outer it will now display the way you want it to. This is not how I thought the model worked though. Very confused :/

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

Okay, this works too, but not supported by IE7 or IE6

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

This is very strange behavior, but apparently if you have a div without width specified, and even if child is wider than parent, parent only gets as wide as the screen.

mrtsherman
  • 39,342
  • 23
  • 87
  • 111