Allungare una colonna al 100%

[Games]

Ciao a tutti, come faccio ad allungare tutta la colonna del menù posizionata a sinistra per tutto il mio contenitore??

<style type="text/css">

html,body {
           margin:1em;
           padding:0px;
          }

body {
      font-family: Arial, sans-serif;
      font-size:76%;
      text-align:center;
     }

div#contenitore {
                 width:75%;
                 margin:0px;
                 text-align:center;
                }

div#header {
            border-top: 1px solid black;
            border-left: 1px solid black;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            background: url(sfondo_header.gif);
           }

div#menu {
          text-align:left;
          margin-top:1em;
          float:left;
          width:15em;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          border-right: 1px solid black;
          border-left: 1px solid black;
          background: url(sfondo_menu.gif);
         }

div#menu ul {
             margin:10px 13px 20px;
             padding:0;
             list-style-type:none;
            }

div#menu ul a {
               display:block;
               width:200px;
               border-bottom: 1px solid orange;
               color: #36c;
               font-weight: bold;
               text-decoration:none;
              }

div#menu ul a:hover {
                     background-color: red;
                     color:blue;
                    }

div#menu ul a#activelink {
                          color:blue;
                          text-decoration:none;
                         }      

div#content {
             border-top: 1px solid black;
             border-bottom: 1px solid black;
             border-right: 1px solid black;
             border-left: 1px solid black;
             margin-left:16em;
             margin-top:1em;
             text-align:left;
             background: url(sfondo_content.gif);
             padding:1em;
            }       
          

</style>

Ecco un immagine della index:



ho provato a mettere in div#menu : height: 100% ma non funziona

Grazie in anticipo

[gordian]

Feci anch'io la stessa domanda un'anno fa e mi fu detto di leggere quest'articolo
http://www.constile.org/tips/min-height/#CONTENUTI
che non sono mai riuscito a comprendere.

Per quel tipo di necessità io uso ancora le tabelle, mentre i CSS2 li uso per creare dei box all'interno di una gabbia tabellare.
Creare un'intero layout solo con i CSS mi rende la vita troppo difficile.

Comunque m'interesserebbe molto sapere la soluzione del tuo problema.

[Sky]

Una soluzione molto spartana ma efficace consiste nel creare un'immagine di 1px di altezza, con gli sfondi dei riquadri, ed applicarla come sfondo ad un div. Dentro di esso inseriamo i vari riquadri del sito, senza sfondi ovviamente.
In pratica è quello che Alessandro Fulciniti spiega nella seconda parte di questa pagina: http://www.html.it/layout_css/layout_css_20.htm :)

[gordian]

Se non ho capito male quella soluzione ti costringe comunque ad usare un contenitore principale nel quale racchiudere altri contenitori e, inoltre, a dargli uno sfondo uguale a quello del contenitore da "allungare".
Non mi sembra molto pratico...

Se io volessi fare un sito senza annidamenti? :master:

[gordian]

Ho pure dato un'occhiata al recente articolo pubblicato nella sezione PRO:
Layout liquido a 3 colonne con i CSS
http://pro.html.it/articoli/id_534/idcat_8/pro.html

Anche accettando l'idea degli annidamenti, resta fermo il limite di dover attribuire lo sfondo di un mio box da un'immagine di larghezza fissa (contenuta in un'altro box), con la conseguenza che se imposto il sito in %, va chiaramente tutto all'aria.

A meno che non ci sia un'altra soluzione + tecnica e - di ripiego, mi sa tanto che bisogna dare un punto a favore (forse l'unico) alle tabelle.

[Games]

il problema senza immagini di sfondi non esiste...
Infatti io nella tesina che ho già finito non ho avuto problemi...
Ma oggi con il mio amico ho avuto questo problema..
Non c'è un modo per fare aderire il tutto fino alla fine del contenitore principale?

[raulz79]

Infatti, io credo che stiamo ignorando un fatto essenziale, ossia non tutti usano solo colori di sfondo alle proprie pagine. Cè chi usa immagini di sfondo e il problema delle colonne di uguale altezza senza usare immagini ripetute è praticamente irrisolvibile. O meglio, con Firefox non lo è, basta dare al container la proprietà overflow: auto, rendere le tre sezioni float a sinistra e darle a ciascuna height: 100%. Purtroppo questa tecnica non funziona con IE, l'altezza delle colonne si adattano al contenuto e non si estendono fino
alla fine del container..