Keeping a DIV centered when it's wider than the browser window
Hi all. I've got a horizontal DIV with a slideshow of images that are 1200 pixels wide, centered on the page. If someone has a resolution of 1024 I would like the DIV to stay centered without causing horizontal scrollbars. I also need the it to have a z-index, so is it possible to do this with relative or absolute positioning? thanks
I used an image that was 1800x1215 for testing. To use this code, you need to change all of the 'width:1800px' settings to the width of your slide images, and set the 'left' on #slideWrapper to negative(!) half of the slide width. Then change the width setting for #showBox to the desired width of the display and all of the 'height:700px;' settings to the desired height.
The code creates an invisible (width:0;) container #slideBox for the slides that positioned in the horizontal center of the overall containing <div> #showBox. #slideBox has overflow:visible, so the content spills out as required. Inside #slideBox we have #slideWrapper using position:absolute with the left position set to minus 1/2 of the slide width, effectively centering it within the overall container #showBox.
All of the elements are positioned, so you can set z-index as needed. Good luck!