Geek Answers Handbook

CSS is center content that is wider than the page

Here is a simple puzzle that disappointed me today:

Consider this page layout:

<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 in the center of the page regardless of the width of the viewport?

I tried various tricks (including text-align: center; display: inline-block; ) and absolute positioning, but with all of them div#content is left-aligned when the browser window is 750 pixels wide.

I have seen several famous sites in the past. For example, on Apple.com, when they advertised a new retina for the iPad: the iPad had a very wide image that extended past the area of ​​the main page (note that this is not a background image of the CSS element <body> ), but it doesn’t cause scrolling when the browser window matches only the contents of the main page.Unfortunately, I can not find any existing sites that do this, so I can not find the link.

Thanks.

+4
source share
3 answers

This is true? 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%; }

+5
source

http://jsfiddle.net/CNNcV/

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

Is this what you are looking for?

-1
source

Add margin: auto to this,

 #content { width: 750px; height: 100px; background: orange; margin: auto}
-1
source

More articles:


All Articles