ansaurus

Question

How to use CSS to ensure items remain offscreen even if window is resized?

Answer 1

+2 A:

Create a div in the middle, that have margin: auto so that it will always be centered. I'm guessing your (red) boxes will always be the same size? Have this centered div with this size, and overflow: hidden. Then inside this div, create the three other divs, which will be moved inside that fixed div size and not the browser window size.

Something like:

<body style="text-align: center">
    <div id="container" style="overflow: hidden; width: 960px; height: 600px; margin: auto; position: relative">
     <div id="slider" style="width: 9999px; position: absolute">
      <div id="first" style="width: 960px; float left;"></div>
      <div id="second" ...></div>
      <div id="third" ...></div>
     </div>
    </div>
</body>

So you move that slider div inside the container setting left: 960px times the number of boxes

baloo 2010-05-21 14:36:21

In an ideal world, the new div would enter from the left edge of the browser window, and exit through the right edge of the window. i.e. the div would occupy 100% of the window, but the red box would be 960px and centered.

Ashley Ward 2010-05-21 15:02:34

To use the whole window, you could center it using the browser window size, position the red box to left: ($(window).width() / 2) - 960/2. And to move it outside the window, move it to left: -960px while having position absolute. Perhaps you can change to position: relative and margin: auto once the box is done animating. That way it would be centered horizontally even on resize

baloo 2010-05-21 20:32:42

Answer 2

A:

Couldn't you just display: none; the red boxes until they were needed?

When they need to move, you could position the boxes at the edge, then slide them on:

http://www.jsfiddle.net/Vsjay/

Eric 2010-05-21 19:47:55

ansaurus

tags:

views:

answers:

How to use CSS to ensure items remain offscreen even if window is resized?

related questions