Box e DIV... problemi di altezza

[Ald3r]

Ciao a tutti.
Ho un piccolo problema con CSS e 2 div in una pagina che stò realizzando.
La pagina è così strutturata:

<DIV ID="1">
   <DIV ID="2">
   </DIV>
   <DIV ID=3>
   </DIV>
</DIV>

Il css relativo è così definito

 #1{
   margin:0px;
   padding: 0px;
   background-color:#C7FFB1;
   border:1px black solid;
   font-family:Verdana Arial sans-serif;  
   width:798px;
   height:100%;
   float:left;
 }
 
  #2 {
   float:left;
   background-color:#07B70F;
   width:214px;
   height: 100%;
   border: 1px red solid;
 }
 
 #3 {
   border: 1px solid red;
   width: 570px;
   padding: 5px;
   float: left;
 }

Il problema è che il div con ID= 3 è alto circa 2000px (per via del testo che contiene) mentre il div con ID = 2 è alto circa 500 px.
Ho provato a definire l'attributo height del div 2 con valore 100% però non mi arriva ugualmente ad avere la stessa altezza dell'altro.
Come posso fare, senza dargli un valore statico in px?
Spero che il problema sia chiaro.
Tnx

Alder

[span]

vuoi attenere un risultato tipico di una tabella... perché non usare una tabella

[Ald3r]

Effettivamente è quello che ho pensato anche io...
ma stò realizzando il sito per scuola e ci hanno detto di non usare le tabelle per impaginare... ma quando vanno usate allora stè azzo di tabelle!?



Alder

[span]

Originariamente inviato da Ald3r
ma quando vanno usate allora stè azzo di tabelle!?

quando vuoi attenere un risultato tipico di una tabella, l'importante è come la usi

se proprio vuoi usare i div ci sono vari modi, giocare coi bordi, con gli sfondi, usare delle immagini, annidare dei div, se ne è parlato già in altri 3d

Un modo è questo:

<div id="2">
contenuti div 2

    <div id="3">
         contenuti div 3
    </div>

    <div class="clear">&amp;nbsp; </div>

</div>

#3{
  float: right;
  width: 100px;
}
.clear{clear: both;}

così, ad es, id 2 prende l'altezza del 3, ma non il contrario... la varie soluzioni cambiano in base all'esigenza, ma perché ostinarsi a usare i div per ottenere un risultato peggiore che con:

<table id="layout">
  <tr>
    <td id="sx">Contenuto 1</td>
    <td id="dx">Contenuto 2</td>
  </tr>
</table>

una volta fatta la struttura puoi usare anche i div per identificare dei blocchi


aggiungo 2 cose:

1 - Coi div è faticoso ottenere la classica struttura di un layout tabellare, ma ne puoi ottenere altre con più facilità.
Perché tu vuoi realizzare un layout del genere, per reali esigenze o perché hai sempre fatto layout tabellari e quindi sei abbituato così?

2 - Non usare i numeri per iniziare una classe o un id: non vengono validati, e non vengono letti da tutti i browser

[floyd46]

ciao
non so se può esserti utile questa pagina di esempio;
puoi vederla al seguente indirizzo:
http://www.extrowebsite.com/layout.htm
Per quello che posso dirti, cerca di evitare quanto più possibile le tabelle; hanno moltissimo codice che alla fine appesantisce la pagina.
Se vuoi prendere il codice: tasto dx >> HTML e lo copi.
Spero di aver inteso bene quello che volevi.

[Ald3r]

Allora, il problema è questo, lo spiego meglio.
Ho un menù sulla sinistra che ha uno sfondo differente da la sezione dove mettere i contenuti.
Se io imposto il div del menù cn height: 100% mi viene più basso della sezione di dx e quindi sotto lo sondo mi compare di un altro colore.

Vedete lo schema qui sotto:

 +-----------------+
 |   |             |
 | 1 |             |
 |___|      3      |
 |   |             |
 | 2 |             |
 |___|_____________|

1: il mio menù (il div 2 del primo post)
2: la parte che non riesco a usare--> vorrei che l'1 arrivasse fino in fondo, ma non ci riesco
3: la parte per i contenuti (il div 3 nel primo post)

Spero sia + chiaro ora.
Come faccio a estendere il div indicato con 1 fino alla fine della pagina in modo che al variare della sezione 3 questo sia uguale?
Tnx

Alder

[floyd46]

Prova a vedere adesso, sempre allo stesso indirizzo + su scritto;
adesso tutta la colonna di sx è di colore unico;
devi "giocare" anche con i colori a volte x avere delle differenti parti con i CSS.
In pratica ho dato lo stesso colore del contenitore generale anche x la colona di sx.
Spero adessa vada bene.
ciao

[Ald3r]

Perfetto!
Era proprio quello di cui avevo bisogno e cui non avevo pensato!
Tnx a lot!

Alder