Hola
pacosorella disculpas por no haber respondido antes pero tuve problemas con la internet y estuve desconectado.
Bueno, yo supuse segun lo que me pusiste que queres utilizar todo el espacio sobrante a la izuierda y derecha del container y te doy una solución para ello. Lo que te sugiero para este caso es una tabla con ancho 100% y tres columnas dos laterales y una central. La central mantiene la estructura y sería el actual "container" y las laterales son nuevos <td> llamados "left_column" y "right_column" los que van a tomar el espacio sobrante que tu querías utilizar. Si a alguna de estas dos columnas le dieras un ancho fijo, la otra tomaría el ancho restante de modo de ocupar todo el espacio de la ventana del browser.
Te paso lo que modifiqué en cada archivo
El en el html Código HTML:
<table id="wrap_container" cellspacing="0">
<tr>
<td id="left_column">left</td>
<td id="container">
<div id="header"></div>
<div id="main_container"></div>
<div id="footer"></div>
</td>
<td id="left_column">right</td>
</tr>
</table> En main.css
Código:
/*-- global container ------------------------------------------------------*/
#wrap_container {
width: 100%;
}
#wrap_container td {
vertical-align: top;
}
/*-- center container ------------------------------------------------------*/
#container {
text-align:left;
width:735px;
}
/*--- header ---------------------------------------------------------------*/
#header {
padding: 0;
margin: 0;
width: 735px;
height: 310px;
position: relative;
}
Código:
/*-- left column ------------------------------------------------------*/
#left_column {
background:yellow;
}
/*-- right column ------------------------------------------------------*/
#right_column {
background:yellow;
}
Fijate si era esto lo que buscabas y me decis.
Te adjunté tambien el material por mail para que lo puedas ver armado.
Saludos,
Pablo.