Hola
klamptax
Aquí la solución (espero...)
Naturalmente tienes que ajustar las medidas a tu proyecto.
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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio de css</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#general {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto; /* no tocar */
background-color: #99FFCC;
}
#menu {
width: 1150px;
height: 52px;
position: absolute;
margin-left: -575px;
left: 50%;
top: 0;
background-color: #99FFCC;
border: 1px solid #444;
overflow: hidden;
text-align: center;
color: #fff;
}
#contenido {
position: relative;
top: 54px;
width: 960px;
margin:0 auto;
background-color:#ffc;
overflow: auto;
border-left: 1px solid #444;
border-right: 1px solid #444;
}
span {
float: left;
width: 190px;
height: 50px;
background-color: #000;
color: #fff;
line-height: 50px;
border: 1px solid #444;
text-align: center;
}
.span_corregido {
width: 188px; /* 'span_corregido' es necesario porque 1150px no es exactamente divisible entre 6*/
}
.simulacro_de_contenido {
width: 100%;
height: 2000px;
text-align: center;
}
.parrafo { /* simulacro de texto */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 100px;
}
</style>
</head>
<body>
<div id="general">
<div id="menu">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span class="span_corregido">Item 6</span>
</div>
<div id="contenido">
<div class="simulacro_de_contenido">
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
<p class="parrafo">Simulacro de contenido</p>
</div>
</div>
</div>
</body> Bye