div annidati con firefoz

**Whitecrowsrain** · 24-04-2007, 15:35

Salve
ho due div nel mio foglio di stile css:

codice:

div #contenitore
{
  height:100%
  width:780px;
}

div #testa
{
  height:30px;
}
div #corpo
{
  margin-top:10px;
}

ma non capisco perchè se metto :

codice:

<html>
..
  <body>
  ...
  <div id="content">
    <div id="testa">
       Titolo
    </div>
    <div id="corpo">
    corpo della pagina
    </div>  
  </div>
  ..
  </body>
</html>

il div contenitore non prende l'altezza di quelli che ha al suo interno ma rimane più piccolo...questo accade solo con firefox.. con IE7 no... ma perchè? eppure sono annidati...

**SGr33n** · 24-04-2007, 15:41

Non hai messo il ; dopo il 100% cmq.

**Mich_** · 24-04-2007, 15:41

height: 100%
il 100% si riferisce al blocco che lo contiene: deve avere una dimensione.

Se il blocco esterno e` il body, anche questo deve avere height: 100%, e anche il html (in FF html e body sono due oggetti distinti; in IE(quirks mode) sono lo stesso oggetto)

**Whitecrowsrain** · 24-04-2007, 15:52

sta dentro ad un altro contenitore che contiene tutta al struttura del sito

codice:

div#container
{
   position:relative;
  width: 760px;
  margin: 0 auto;
  text-align: left;
  border-left: 2px solid #004fa0;
  border-right: 2px solid #004fa0;
  background-color: #DEDEDE; 
}

div#header
{
  margin-left:130px;
  background-color:#004fa0;
  color: #ff0;
  height:211px;
}

div#navigation
{
  position:absolute;
  top: 0px;
  left: 0;
  width: 130px;
  height:100%;
  background: #FFFFFF url(/img/menusx.jpg) no-repeat top left;
}
#content
{
  margin-left: 130px;
  padding: 1em;
  background-color: #DEDEDE;
  height:100%;
  border: 1px solid;
}

e poi ovviamente gli altri due div che ho postato... il codice html è il seguente:

codice:

<html>
<head>
  ...
</head>
<body >
  <div id="container">[/b]
    
    <div id="header">
      
       <--banner-->
     </div>
     <div id="content">
       <div id="testa">
         <h2>Home Page Di Calen</h2>
       </div>
       <div id="corpo">
        

 Contenuti dell'home page.Contenuti dell'home page.Contenuti dell'home page.Contenuti dell'home page.
        Contenuti dell'home page.Contenuti dell'home page.Contenuti dell'home page.Contenuti dell'home page. </p>
       </div>
       <div id="news">
         elenco novità
       </div>
    </div>
    <div id="navigation">
      <ul>[*]menu1[*]menu2[*]menu3
       .....[/list]
    </div>
    <div id="footer">
      


       Piede
      </p>
    </div>
  </div>
</body>
</html>

e non capisco perchè con firefox content prende l'altezza dei div che contiene..

**Mich_** · 24-04-2007, 16:51

e non capisco perchè con firefox content prende l'altezza dei div che contiene..

Te l'ho gia` detto!
height: 100% vuol dire che prende l'altezza del blocco contenitore. Ma se tale blocco non ha un'altezza definita, non vuole dire nulla. E` come non metterlo.

perche` funzioni devi definire
height: 100%;
anche a #container, a body ed a html

Tieni presente che il tuo #container non contiene il #navigation, che avendo position: absolute viene gestito da un processo diverso (come se fosse fuori dal flusso).

Ma perche` usi quel layout? Non sarebbe piu` conveniente usare i float, invece?

**Whitecrowsrain** · 24-04-2007, 16:55

Originariamente inviato da Mich_
Te l'ho gia` detto!
height: 100% vuol dire che prende l'altezza del blocco contenitore. Ma se tale blocco non ha un'altezza definita, non vuole dire nulla. E` come non metterlo.

perche` funzioni devi definire
height: 100%;
anche a #container, a body ed a html

Tieni presente che il tuo #container non contiene il #navigation, che avendo position: absolute viene gestito da un processo diverso (come se fosse fuori dal flusso).

Ma perche` usi quel layout? Non sarebbe piu` conveniente usare i float, invece?

cioè mettere la proprietà float anche al menu a sinistra?
in effeti non ci avevo pensato..

ma se io avessi bisogno che sia il container sia il content abbiano altezza variabile che dipenda dal loro contenuto come dovrei fare? (in questo caso il container già soddisfa la mia richiesta..

**Whitecrowsrain** · 24-04-2007, 17:02

rettifico : ci avevo pensato ad usare i float ma c'è l'inconveniente che dovrei metttere al prima di tutto il div menu( navigation) a svantaggio del contenuto della pagina che verrebbe dopo...ecco perchè ho deciso di complicarmi la vita così

**Mich_** · 24-04-2007, 17:09

ma se io avessi bisogno che sia il container sia il content abbiano altezza variabile che dipenda dal loro contenuto come dovrei fare? (in questo caso il container già soddisfa la mia richiesta..

Allora non specificare l'altezza.
Vedi anche le false colonne (faux columns): tra i "link utili" o con una ricerca in rete

rettifico : ci avevo pensato ad usare i float ma c'è l'inconveniente che dovrei metttere al prima di tutto il div menu( navigation) a svantaggio del contenuto della pagina che verrebbe dopo...ecco perchè ho deciso di complicarmi la vita così

Puoi anche usare il float:right (in ambedue i blocchi, o solo nel primo) e allora metti prima il blocco che vuoi a destra.

**Whitecrowsrain** · 24-04-2007, 17:17

Originariamente inviato da Mich_
Allora non specificare l'altezza.
Vedi anche le false colonne (faux columns): tra i "link utili" o con una ricerca in rete

Puoi anche usare il float:right (in ambedue i blocchi, o solo nel primo) e allora metti prima il blocco che vuoi a destra.

azz che scemo non ci avevo pensato!

grazie per la dritta... faux columns.. mai sentite prima ed ora do un'occhiata.. un 'anticipazione?

**Whitecrowsrain** · 24-04-2007, 17:54

ho un problema con i float : right .. io vorrei avere una struttura del genere:

Discussione: div annidati con firefoz

Strumenti discussione

Ricerca discussione

Visualizza

div annidati con firefoz

Permessi di invio