Keeping a DIV centered when it's wider than the browser window

**drennan** · 11-08-2012, 06:57 PM

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

**simplypixie** · 11-09-2012, 06:31 AM

overflow: hidden; ????

**rtrethewey** · 11-09-2012, 11:15 AM

The only way I know to do this requires a bit of a hack I found for vertical centering. I just changed it to work on the horizontal aspect:

Code:

<!DOCTYPE html>
<head>
<style>

* { margin:0; padding:0; }
#wrapper { padding:4px 8px; position:relative; top:0; left:0; }

#showBox { width:90%; height:700px; margin:8px auto; position:relative; top:0; left:0; overflow:hidden; z-index:1; }
#slideBox { width:0px; height:700px; position:absolute; top:0; left:50%; overflow:visible; }
#slideWrapper { position:absolute; top:0px; left:-900px; width:1800px; height:700px; }

</style>
</head>
<body>
<div id="wrapper">

<div id="showBox">
<div id="slideBox">
<div id="slideWrapper"><p id="slide"><img src="images/image.jpg" alt="1800px image"></p></div><!-- end #slideWrapper -->
</div><!-- end #slideBox -->
</div><!-- end #showBox -->

</div><!-- end #wrapper -->
</body>
</html>

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!

**drennan** · 11-12-2012, 04:34 PM

Ah thanks man! I didn't realise this would need a hack - thought it would be a pretty standard thing. Works perfectly though, thanks for taking the time to explain

Thread: Keeping a DIV centered when it's wider than the browser window

Thread Tools

Display

Keeping a DIV centered when it's wider than the browser window

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions