Aiuto necessario con DIV-il layout per il sito

Question

Sto cercando di costruire una pagina con il seguente in esso:

Hai già il seguente:

• un div per la pagina per centrare l'intera pagina con la larghezza di 809px
• all'interno <div class="page"> è la seguente:
  • <div class="header">
  • <div class="container"> (contenitore per roba contenuto)
  • <div class="footer">

Quello che sto lottando con:

• <div class="container"> deve contenere i seguenti:
  • più a sinistra <div class="leftShadow"> con altezza 100% al contenitore, l'immagine ombra sinistra con come sfondo per <div class="leftShadow">
  • secondo a <div class="custom_content"> sinistra con altezza al 100% per contenitore (conterrà il contenuto della pagina
  • secondo a <div class="sidebar_right"> scorretto con altezza al 100% per contenitore (conterrà collegamenti supplementari)
  • <div class="rightShadow"> più a destra con l'altezza al 100% per il contenitore, l'immagine ombra scorretto con come sfondo per <div class="rightShadow">

Quindi, per riassumere:

<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>

Quindi, quello che dovrebbe accadere è, quando uno custom_content o la forza di sidebar_right div di lunghezza sotto l'altro, l'altro avrebbero tratto in altezza per essere lo stesso con il div più a lungo. Ovviamente, sia div laterale (leftShadow e rightShadow) dovrebbe anche allungare al 100% dell'altezza del contenitore.

Qualcuno può per favore mi guida nella giusta direzione? In sostanza, questi div dovrebbero comportarsi molto simile a un tavolo farebbe quando il contenuto di un td si estende oltre l'altezza degli altri TD.

Answer 1

Non utilizzare div come tavoli!

Il leftShadow e rightShadow div sono completamente inutili. Combina le immagini di sfondo in una singola immagine e impostarla come sfondo del vostro contenitore div.

Per assicurarsi che l'immagine di sfondo riempie l'altezza del contenitore, set background-repeat:. Repeat-y

Answer 2

Perché non usare qualcosa di simile a "Colonne Faux"?

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

Answer 3

Forse non sarà necessario il leftShadow e div rightShadow: dare un'occhiata a faux colonne .

Questo è quello che stai cercando, spero. :)

Answer 4

Lo farei in modo diverso perché non avete intenzione di ottenere il vostro div a comportarsi come le tabelle.

Non sono del tutto sicuro di cosa hai intenzione questo a guardare come, ma sono immagino si desidera una sorta immagine ombra lungo il lato destro e sinistro del div contenitore. Che ne dite di rimuovere le div leftShadow e rightShadow, mettere un'immagine di sfondo ripetibile sul div contenuto di 809px di larghezza (e forse altezza 1, a seconda di ciò che la vostra immagine ombra assomiglia). forse anche impostare overflow:. nascosto sul div contenuti - se ricordo bene Quello è un tipo di hack che renderà il tratto div contenente in questa situazione