Se necesita ayuda con DIV-diseño para el sitio

Question

Estoy tratando de construir una página con el siguiente en él:

Ya tiene lo siguiente:

• div uno de página para centrar toda la página con un ancho de 809px
• dentro <div class="page"> es la siguiente:
  • <div class="header">
  • <div class="container"> (contenedor para la materia de contenido)
  • <div class="footer">

Lo que yo estoy luchando con:

• <div class="container"> debe contener lo siguiente:
  • <div class="leftShadow"> más a la izquierda con la altura 100% al recipiente, imagen de la sombra izquierdo con como fondo para <div class="leftShadow">
  • segundos a <div class="custom_content"> izquierda con la altura 100% al recipiente (contendrá el contenido de la página
  • segundos a <div class="sidebar_right"> derecha con la altura 100% al recipiente (contendrá enlaces adicionales)
  • <div class="rightShadow"> más a la derecha con la altura 100% al recipiente, imagen de la sombra derecha con como fondo para <div class="rightShadow">

Para resumir:

<div class="page">
    <div class="header">header image</div>
    <div class="container">
        <div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
        <div class="custom_content">(this is where the content would be)</div>
        <div class="sidebar_right">(some other links)</div>
        <div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>

Entonces, ¿qué se supone que sucede es que, cuando sea custom_content o la fuerza de sidebar_right div de longitud por debajo de la otra, y la otra se extenderían en altura a ser el mismo con el que ya div. Obviamente, tanto de div lateral (leftShadow y rightShadow) también debe estirar a 100% de la altura del contenedor.

Puede alguien por favor me guía en la dirección correcta? Básicamente, estos divs deben comportarse tanto como una mesa lo haría cuando el contenido de un TD se extiende más allá de la altura de la otra TD.

Answer 1

No utilizar divs como mesas!

El leftShadow y rightShadow divs son completamente innecesarios. Combinar las imágenes de fondo en una sola imagen y establecerla como el fondo de su contenedor div.

Para asegurarse de que la imagen de fondo llena la altura del contenedor, establezca background-repeat:. Repeat-y

Answer 2

¿Por qué no usar algo como "columnas de imitación"?

http://www.alistapart.com/articles/fauxcolumns/

Answer 3

Tal vez usted no necesitará el leftShadow y divs rightShadow: echar un vistazo a de imitación columnas .

Esto es lo que está buscando, espero. :)

Answer 4

Me gustaría hacer esto de manera diferente, ya que no va a conseguir su divs a comportarse como tablas.

No estoy del todo seguro de lo que está queriendo esto a parecerse, pero estoy supongo que desee algún tipo de imagen de la sombra por la izquierda y derecha de la div contenedor. ¿Qué hay de la eliminación de los divs leftShadow y rightShadow, poner una imagen de fondo repetible en el div contenido del ancho de 809px (y tal vez la altura 1, dependiendo de lo que su imagen se parece a la sombra). También quizá establecer desbordamiento:. Escondida en el div de contenido - si no recuerdo eso es justamente una especie de truco que hará que el tramo div que contiene en esta situación