Home/ Questions/Q 8176641
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T23:16:34+00:00

Here’s a simple puzzle that’s been frustrating me for a while today: Consider this

  • 0

Here’s a simple puzzle that’s been frustrating me for a while today:

Consider this page markup:

<head>
    <style type="text/css">
        #wrapper { overflow: hidden; }
        #content { width: 750px; height: 100px; background: orange; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">Foo bar</div>
    </div>
</body>

How can I get div#content centered in the page regardless of viewport width?

I’ve tried a variety of tricks (including text-align: center; display: inline-block;) and absolute positioning, but with all of them the div#content is left-aligned when the browser window is brought under 750px in width.

I’ve seen a few high-profile websites do this in the past. For example on Apple.com when they advertised the new retina iPad: the iPad pictured was a very wide image that extended past the main page area (note it was not a CSS background image of the <body> element), but it didn’t cause scrolling when the browser window only fit the main page content. Unfortunately I can’t seem to find any existing sites that do this so I can’t find a reference.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Is this it? Take a look -> http://jsfiddle.net/joplomacedo/CkvuG/

    HTML

    <div id="page">
  <div id="main">
      <div id="extended-out"><img src="http://myfreeipad.us.com/wp-content/uploads/2011/10/ipad.png" /></div>
  </div>
</div>

    CSS

    #page {
  overflow: hidden;
  min-width: 200px; /*same as #mains width*/
}

#main{
  position: relative;
  height: 500px;
  width: 200px;
  margin: 0 auto;
  background-color: lightgreen;
}


#extended-out { 
  height: 200px;
  margin: 0 -100px;
  background: indianred;
  border: 1px solid red;
}

#extended-out img {
    width: 100%; height: 100%;
}

    ​

    • 0