ansaurus

Question

Div wider than browser without browser scrolling.

Answer 1

A:

you could use the onresize event and when its less than 970px, change overflow-x to auto or scroll.

if you are using jQuery, look up the .resize() method

Moin Zaman 2010-09-04 20:59:16

If you are going to do this, make sure you use dobouncing: http://benalman.com/code/projects/jquery-dotimeout/examples/debouncing/ (Check the 2nd example)

SimpleCoder 2010-09-04 21:05:09

debouncing looks very useful, That guy Ben Alman has written some neat plugins. I've recently used his haschange and BBQ plugins.

Moin Zaman 2010-09-04 21:10:28

Answer 2

+2 A:

This works without JavaScript:

<body style="margin:0">
<div style="position:absolute;width:100%;height:600px;overflow:hidden;min-width:970px;z-index:0;">
 <div style="position:absolute;width:1200px;height:600px;left:50%;margin-left:-600px;">
  --flash object--
 </div>
</div>
<div style="position:absolute;width:100%;z-index:100;">
 --main content--
</div>
</body>

UPDATE:Had to make changes to accommodate your absolute div positioning (the parent div has to be absolutely positioned as well)

userx 2010-09-04 21:07:39

That puts the boxes in the right place in two dimensions, but it puts the content behind the background.

danorton 2010-09-05 00:49:22

@danorton use the CSS property z-index to set your main body on top. I'll update my above code.

userx 2010-09-05 01:47:53

Answer 3

A:

A solution is possible entirely with CSS. The key pieces are position: fixed and z-index: -1. The two DIVs in this example are siblings, but there are other possibilities. This solution works with the latest versions of Chrome, FireFox, Safari, Opera and MSIE.

This does not work with MSIE6, which doesn’t correctly implement the z-index style, but there is an MSIE6-compatible solution (which shows the scrollbar at 1200px) if you’re able to rearrange things and add a DIV wrapper.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html title="html">
  <head>
    <style type="text/css">
    #content
    {
      background: #ffffe8;
      height: 500px;
      margin: 0 auto;
      width: 970px;
    }
    #background
    {
      background: #ffe8e8;
      height: 600px;
      left: 50%;
      margin-left: -600px;
      position: fixed;
      top: 0;
      width: 1200px;
      z-index: -1;
    }
    </style>
  </head>
  <body title="body">
    <div id="content" title="#content">
      <p>content</p>
    </div>
    <div id="background" title="#background">
      <p>background</p>
    </div>
  </body>
</html>

danorton 2010-09-04 22:02:30

ansaurus

tags:

views:

answers:

Div wider than browser without browser scrolling.

related questions