No replies
logicdefied's picture
Vancouver, BC
Last seen: 9 years 10 weeks ago
Vancouver, BC
Timezone: GMT-7
Joined: 2011-01-24
Posts: 1
Points: 2

The following code centers a 960px div inside a 1600px div. My issue is that when loaded on a smaller browser, since I've hidden overflow-x, it crops the background from the right, instead of equally cropping from both sides. In a nutshell, the "blue" div should be in the middle of a 1024 browser window, not on the right.

See here for example:

I've implemented a working version here:

But, I needed to cheat using only absolute divs; for learning purposes, this would not have worked if my bg elements were of varying height.

Any help would be greatly appreciated!

Thanks a million!

<div id="container">
    	<div id="headerbg"></div>
		<div id="rotator"></div>
        <div id="social"></div>
        <div id="container-content"></div>

@charset "utf-8";
/* CSS Document */
body, html {
	margin: 0;
	height: 100%;
	background: #CCC;
	overflow-x: hidden;
/* bg elements */
#container {
	position: relative;
	width: 1600px;
	margin:0 auto;
	background: red;
	height: 800px;
#headerbg {
	position: absolute;
	width: 1600px;
	height: 200px;
	background: rgba(0,0,0,0.5);
	top: 0;
	left: 0;
#rotator {
	width: 1600px;
	background: green;
	height: 350px;
#social {
	width: 1600px;
	background: yellow;
	height: 45px;
	margin-top: 10px;
/* narrow stuff */
#container-content {
	display: inline-block;
	position: absolute;
	top: 0px;
	margin: 0 auto;
	width: 960px;
	background: #09f;
	height: 1000px;