Altezza div

[nabozzz]

Ciao a tutti

ho creato una struttura a 2 colonne con larghezza fissa. L'altezza è variabile.
Ho riscontrato un problema che non riesco a risolvere in alcun modo. Questo è il CSS

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #002e5c;
    background-image:url(bg.jpg);
    background-position:center top;
    background-repeat:no-repeat;
}

#main {
width: 949px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#rightcolumn {
float: left;
width: 729px;
background-color: #efefef;
height: 100%;
}

#leftcolumn {
float: left;
width: 220px; /*Width of left column*/
margin-left: -949px; /*Set left margin to -(MainContainerWidth)*/
height: 100%;
}

div.menu {
width: 220px;
height: 530px;
margin: 0;
padding: 0;
background: url(gfx/sfondo_menu.png) no-repeat;
}

div.sfondo {
width: 220px; /*Width of left column*/
height: 100%;
background: url(gfx/sfondo_menu.gif) repeat;
}

#footer {
clear: left;
width: 949px;
height: 29px;
background: url(gfx/sfondo_piede.png) no-repeat;
color: #FFF;
text-align: center;
padding: 0px 0;
}
</style> 

e questo è l'html

<div id="main">
    <div id="contenuto">
        <div id="rightcolumn">
            <div class="innertube">Contenuto destra </div>
        </div>
    </div>

    <div id="leftcolumn">
        <div class="menu">Contenuto sinistra</div>
        <div class="sfondo"></div>
    </div>
    <div id="footer">Footer</div>    
</div> 

Il mio problema è che lo sfondo della colonna di sinistra che dovrebbe continuare PER TUTTA L'ALTEZZA della colonna destra, invece termina quando terminano i contenuti della colonna sinistra, perciò io mi ritrovo con 1 colonna mezza vuota (ho provato anche mettendo lo sfondo, ma il risultato è uguale. Ho visto che ci sono delle soluzioni con layout fluidi e le ho anche provate senza successo.

Ho provato a creare un altro div (chiamato sfondo) sotto il div menu... ma niente da fare... essendo vuoto non mi fa vedere nulla....

Grazie a chi mi risolverà sta cosa.

[Leilond]

Io di solito uso le immagini di sfondo su dei "container"
Una cosa del genere

<div id="main">
  <div id="container">
   <div id="container2">
    <div id="contenuto">
        <div id="rightcolumn">
            <div class="innertube">Contenuto destra </div>
        </div>
    </div>

    <div id="leftcolumn">
        <div class="menu">Contenuto sinistra</div>
        <div class="sfondo"></div>
    </div>
   </div>
  </div> 
 <div id="footer">Footer</div>    
</div> 

Come vedi ho aggiunto 2 div (container e container2) che "contengono" tutta la parte centrale (right column e left column)
A questo punto crei due regole CSS

div#container
{
background: url(left.gif) repeat-y top left
}
div#container2
{
background: url(right.gif) repeat-y top right
} 

In modo che "left.gif" e "righ.gif" siano due immagini larghe esattamente quanto le colonne "left" e "right", alte 1 pixel

[nabozzz]

grazie mille... ottima dritta... su IE7 funziona... su Mozilla no però...

tieni conto che a me basta avere lo sfondo/immagine che continua solo nella colonna di sinistra, per cui ho risolto spostando la proprietà background sul main....

come ripeto.. su IE funziona... su Mozilla no :-(

[Leilond]

Questo è strano... magari ho scritto una vaccata da qualche parte... io di solito lavoro su mozilla e mi funziona tutot e poi sono costretto a fare i salti mortali per far funzionare le cose su IE (che lo possino!!)

Comunque, per quello che devi fare tu ti consiglio un markup più semlice

<div id="main">
  <div id="main2">
    <div id="leftcolumn">
      <div class="menu">Contenuto sinistra</div>
    </div>
    <div id="rightcolumn">
      <div class="innertube">Contenuto destra </div>
    </div>
  </div>
</div>
<div id="footer">Footer</div> 

con questo css

html, body {
margin: 0;
padding: 0;
width: 100%;
}
#main {
margin: 0 auto; /*Center container on page*/
}

#leftcolumn {
float: left;
width: 220px; /*Width of left column*/
}
#rightcolumn {
margin-left: 230px;
}

#footer {
clear: both;
background: url(gfx/sfondo_piede.png) no-repeat;
text-align: center;
padding: 0px 0;
} 

(potresti anche rimuovere i div "menu" e "innertube" se non ti servono per altre cose)
In questo modo la colonna di destra (grazie al margin-left) si posiziona e occupa tutto lo spazio concesso dal browser e non sei obbligato a definire "width" (cosa che comunque puoi fare)
Dopo di che applichi le due immagini

background: url(left.gif) repeat-y top right
background: url(right.gif) repeat-y top left; 

una a "main" e una a "main2" (o solo ad una delle due...)
E il gioco è fatto
A quel punto puoi giocare con "background-color" e "background-image" in maniera tranquilla poichè tutto dovrebbe rimanere a posto sia su IE che su Firefox
Per dare un'occhiata a come si posizionano gli elementi metti dei background-color diversi e ti regoli
E in generale non usare "height" per i "contenuti". Lascia che le colonne si alzino e si abbassino in base a quanto sono "piene"

[nabozzz]

Grazie mille, ora è tutto a posto... non so come mai, ho semplicemente riscritto tutto in maniera + semplice e ora è proprio come lo volevo.

Grazie ancora!