Div izquierdo 100%, div central 900px y div derecho 100%

[gogupe]

Hola a todos.

A ver si me podéis decir si esto se puede hacer, porque ya llevo un rato y no lo consigo.

Quiero hacer esto

[izq 100%] [central 900px] [der 100%]

El izquierdo y el derecho tienen que llegar hasta el ancho de la página, y son diferentes entre ellos ya que llevarán un bacgrkound-image distinto.

Muchas y un saludo.

[ArturoGallegos]

si aun elemento le pones 100% de ancho esto implica que cubrirá todo el espacio disponible por ende de poco te servirá flotarlo, en todo caso te quedara arriba, en medio, abajo

explícate mejor en lo que quieres lograr, quizás una imagen o un sitio que ya lo este implementando.

[gogupe]

Hola.

No se como explicarlo de otra manera... pero lo intentaré.

Lo que quiero es el div central se quede en el centro con 900px, en eso no hay problema, luego quiero que a la izquierda haya un div que llegue hasta el ancho de la pantalla (lo que resta de pantalla) y este div va a tener un color fondo azul (por ejemplo), luego el div derecho igual que el izquierdo, que llegue hasta el borde la pantalla (lo que resta) y tendrá un color de fondo rojo.

El motivo de hacerlo asi, es que los div izquierdo y derecho tendrá una imagen de fondo repetitiva y será distinto en cada uno.

Saludos.

[pedrogp9693]

Una solución seria hacer un div que estuviese debajo del principal, con el 100% de ancho y un z-index -1, y dentro de ese le pones dos divs con el 50% cada una y ya les pones el fondo que quieras.

Un intento de explicarlo gráficamente:
------[DIV 900px]-------
[[DIV --- 50%][DIV --- 50%]]

[ryugen]

Si soporte para IE7 no es un requisito, yo lo haría así:

Código HTML:

<div class="container">
    <div class="content sidebar"></div>
    <div class="content main">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="content other-sidebar"></div>        
</div>
 

Código CSS:

.container {
    width:100%;
    display:table;
}
.content {
    display:table-cell;
}
.main {
    width:900px;
}
.sidebar {
    background:blue;
}
.other-sidebar {
    background:red;
}
 

Ejemplo en funcionamiento: http://jsfiddle.net/gSaPd/embedded/result/

[gogupe]

Iniciado por pedrogp9693

Una solución seria hacer un div que estuviese debajo del principal, con el 100% de ancho y un z-index -1, y dentro de ese le pones dos divs con el 50% cada una y ya les pones el fondo que quieras.

Un intento de explicarlo gráficamente:
------[DIV 900px]-------
[[DIV --- 50%][DIV --- 50%]]

Perfecto !!!! sabía que la solución tenía que ser fácil, pero no lo veía.

Muchas gracias !!!!

[gogupe]

Iniciado por ryugen

Si soporte para IE7 no es un requisito, yo lo haría así:

Código HTML:

<div class="container">
    <div class="content sidebar"></div>
    <div class="content main">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </div>
    <div class="content other-sidebar"></div>        
</div>
 

Código CSS:

.container {
    width:100%;
    display:table;
}
.content {
    display:table-cell;
}
.main {
    width:900px;
}
.sidebar {
    background:blue;
}
.other-sidebar {
    background:red;
}
 

Ejemplo en funcionamiento: http://jsfiddle.net/gSaPd/embedded/result/

He probado esto y no me ha funcionado, aunque el código tiene también buena pinta.

Muchas gracias.