Hola, he dado con una posible solución. Me he basado en soluciones usadas para otros problemas diferentes, y también calentándome un poco la cabeza. Lo he probado en tu ejemplo pero con columnas de ancho variable y me sale.
La idea es esta:
bueno, olvida lo del borde antes que nada. He probado dándole ancho relativo y no funciona.
Como voy a usar posicionamiento absoluto en los hijos de "container", para poderlos posicionar con respecto a este, a container le doy un posicionamiento relativo, y le doy el ancho del documento que quiero, en este caso el 75% del documento. Luego, el bloque "content" lo floto a la izq y le doy un porcentaje del ancho de "container", p.ej el 75%.
Código:
#container {
position:relative;
background-color: #fff;
overflow: hidden;
width: 50%;
margin: 10px auto 5px auto;
border: 1px solid #000;
#content {
background-color: #fff;
width: 75%;
float: left;
}
Luego, lo que hago es crear un nuevo bloque llamado "fondo", a cuyo fondo le doy el mismo color que el fondo de "menu", o sea, el color que quieres alargar, y este bloque nuevo debe tener el mismo contenido que la capa "content", luego explico por qué. Lo posiciono de forma absoluta y le doy de posición left el 75% del ancho de la columna "content" y de ancho le doy el resto, 25%.
Código:
#fondo {
position:absolute;
left: 75%;
width: 25%;
background-color: #0099FF;
}
Ahora llega lo verdaderamente importante:
Código:
#fondo * {
position:relative;
left: -1000px;
}
con esto lo que hago es posicionar todo elemento hijo del bloque "fondo", los cuales no los quiero porque ya los tengo en la columna "content", de forma que se salgan por el margen izquierdo de la pantalla. En esto me he inspirado en el método Phark de sustitución de un texto por imagen. Al tener posicionamiento relativo, el bloque se comporta como si los elementos realmente estuvieran ahí en su lugar inicial, aunque realmente no lo estén, lo cual le crea el rellenado al bloque y hace que el fondo se expanda, y al ser el mismo contenido del otro bloque y presuponiendo que la columna "content" siempre será más ancha que la columna "menu", el bloque "fondo" fluirá a la misma altura.
Por último, resta colocar el verdadero contenido que quiero mostrar en esa capa "menu", posicionándolo de forma absoluta de la misma forma que he hecho con la capa "fondo". Al posicionarse después, el orden de apilamiento será mayor y se colocará sobre la capa fondo (si se declaran al revés en el documento HTML solo se tendría que cambiar las propiedades z-index de cada uno).
Código:
#menu {
position: absolute;
left: 75%;
width: 25%;
color: #fff;
background: #0099FF;
text-align: left;
}
lo he probado tanto en FF como en IE7, metiendo como contenidos tanto texto como imágenes, y funciona. No he hecho más pruebas, así que es posible que esté limitado.
En cualquier caso, si nadie antes había dado con esta solución (supongo que habrá otras y mejores), me voy a permitir llamar a este método el Método de Zig-Zag de L.Martín (quien sabe si esto puede trascender y yo que soy pobre jejeje
), por mover primero a la derecha y luego a la izquierda.
Aquí está el CSS completo:
Código:
#container {
position:relative;
background-color: #fff;
overflow: hidden;
width: 50%;
margin: 10px auto 5px auto;
border: 1px solid #000;
}
#content {
background-color: #fff;
width: 75%;
float: left;
}
#fondo {
position:absolute;
left: 75%;
width: 25%;
background-color: #0099FF;
}
#fondo * {
position:relative;
left: -1000px;
}
#menu {
position: absolute;
left: 75%;
width: 25%;
color: #fff;
background: #0099FF;
text-align: left;
}
y aquí pongo un ejemplo de HTML similar al posteado por okram que usa ese CSS:
Código HTML:
<body>
<div id="container">
<div id="content">
<p>bla bla bla bla</p>
<p>bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p><img src="imagenprueba.jpg" width="319" height="243" /></p>
</div>
<div id="fondo">
<p>bla bla bla bla</p>
<p>bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p><img src="imagenprueba.jpg" width="319" height="243" /></p>
</div>
<div id="menu">
bla bla bla bla
</div>
</div>
</body> No lo he comprobado aún, pero si no me equivoco, este método no funcionaría en caso de que el ancho relativo asignado a la columna "menu", y por lo tanto a "fondo", fuera mayor que el asignado a "content", algo que no debería ser muy habitual, ya que el contenido de "fondo" no llegaría como mínimo a la misma altura que el de "content".
Y bueno, cualquier otro fallito de este método me lo decís. Me llevaré una desagradable sorpresa pero bueno, todo se puede mejorar no?
