Aquí el ejemplo:
Probarlo haciendo un copy en un html limpio. Si se prueba en un monitor distinto a 1280px de ancho, cambiar la medida del ancho del #contenedor por la propia y el margin-left (debe ser la mitad del ancho de nuestro monitor en negativo); y resizar el navegador para ver lo que ocurre en el desborde de los laterales: siempre queda centrado el conjunto (mirar la raya vertical que marca el centro de la pantalla).
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
#contenedor {
width: 1280px; /* cambiar esta medida según el ancho del monitor en el que se pruebe */
height: 80%;
top: 10%;
position: absolute;
margin-left: -640px; /* la mitad del width en negativo */
left: 50%;
}
#izquierdo {
position: relative;
left: 0;
width: 150px;
height: 100%;
background-color: #00f;
}
#derecho {
position: absolute;
left: 150px;
top: 0;
width: 100%;
height: 100%;
background-color: #ccc;
}
.marca_central {
play-during;
position: absolute;
width: 2px;
margin-left: -1px;
left: 50%;
height: 100%;
background-color: #000;
z-index: 10;
}
</style>
</head>
<body>
<p>Este el fondo del body y no se ve afectado por el desbordamiento de contenido en resoluciones menores: siempre queda a cero de la izquierda</p>
<!-- probar esta composición cambiando el tamaño del navegador (resizando)-->
<div id="contenedor">
<div id="izquierdo">Lado izquierdo</div>
<div id="derecho">Lado derecho</div>
</div>
<div class="marca_central"><!--solo para efecto visual del centro de la pantalla--></div>
</body>
</html>