www.webdeveloper.com
Results 1 to 4 of 4

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

  1. #1
    Join Date
    Jun 2008
    Location
    London
    Posts
    175

    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

  2. #2
    Join Date
    Aug 2012
    Posts
    155
    overflow: hidden; ????

  3. #3
    Join Date
    Mar 2011
    Posts
    1,136
    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!
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles