width % parent

[Gio2011]

Ciao a tutti,

sto provando a fare questo:

<div>
    <div style="float:left; width:250px; background-color:#F00;">div menu</div>
    <div style="display:table;width:100%;" class="div_table">
        <div style="display:table-cell;width:70%; background:#0F0;" class="div_td1">div 70%</div>
        <div style="display:table-cell;width:30%; background:#9F0;" class="div_td2">div 30%</div>
    </div>
</div>

e vorrei che le classi div_td1 e div_td2 prendano come 100% la width della classe div_table, non della pagina html. E' possibile farlo con i CSS?

[Al_katraz984]

se dichiari la width di "div_td1" al 70% non è possibile che prenda il 100%...

perchè hai stile inline e classi? tutto sul css no?

[Nobody33]

Dichiara il div esterno in pixel e . div_td1 + .div_td2 in % come hai fatto.

COSI

[Gio2011]

Al_katraz984 è per capirsi che metto anche stili e classi sui div, senza star li a scrivere stili e codice

Nobody33 grazie per l esempio. Non è quello che voglio fare però...Puoi vedere quello che mi serve, con questo codice:

    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td class="menu" style="width:250px; border:1px solid #900;">
                menu
            </td> 
            <td>   
                <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="col_1" style="width:70%; border:1px solid #0F0">colonna 1</td>        
                        <td class="col_2" style="width:30%; border:1px solid #03F;">colonna 2</td> 
                    <tr>
                </table>
            </td>
        </tr>
    </table>

il div che contiene i due div che devono prendere IL SUO 100% (class="div_table"), deve prendere il 100% rimanente da "menu", meno lo spazio rimanente al margine destro dell html...

[Nobody33]

Serve sempre un div esterno che racchiude il tutto. Altrimenti, il 100% di che cosa? Della pagina, del contenitore padre?

Non esiste il SUO 100%.

La stessa cosa vale per la tabella che hai fatto. Prova ad incollare il codice da qualche parte senza avere un contenitore padre intorno. Succederà che la tabella riempirà tutta la finestra in larghezza.

Vedesi QUI .

L'unico limite che ha la seconda tabella è la prima tabella a sinistra, dove al suo interno il td class ="menu " è sempre stato dichiarato in pixel.
Spero di essere stato + chiaro questa volta.

[Gio2011]

No, il esempio con le tabelle, ha la table dentro al td con width 100%, non dichiarato in pc. E il 100% in realtà é il 100% dell html meno i 250px del menù...la stessa cosa devo farla con i div ma non viene...

se tu allarghi e stringi il browser con le table, funziona perfettamente. Menù fisso 250px, col_1 che prende il 70% dello spazio rimanente e col_2 che prende il 30% dello spazio rimanente...

[Nobody33]

Credo di averti capito. Per dirla semplice, però, la tabella è una cosa rigida mentre il div è più "mobile", "fluido" si presta meglio per un sacco di altre cose. Personalmente evito le tabelle più che posso proprio perché sono rigide.

Se vuoi vedere il tuo codice delle tabelle riscritto in div, esce +/- (!) QUESTO;

In realtà non ho ancora capito a cosa ti potrebbe servire un'impostazione del genere. Puoi però sempre farlo con il tuo esempio delle tabelle.

[Gio2011]

Purtroppo neanche questo fa quello che voglio che faccia

Credo sia molto comodo e fluido per siti fatti in CSS3, puoi fare if che riassettano il sito in base a quanto è grande il monitor o a quanto viene ingrandito..tutto css non javascript

[Al_katraz984]

puoi postare una immagine che spiega quello che ti serve??

cosi non si capisce niente, semplicemente:

se parent = 500px e child = 100% -> child = 500px
se parent = 30% + 70% e child = 100% contenuto nel parent1 -> child = 30%
se parent = 30% + 70% e child = 100% contenuto nel parent2 -> child = 70%
se parent = 30% + 70% e child = 100% ma deve "contenere" parent al 100% aggiungo attributo "colspan=2" -> child = 30+70%

[Gio2011]

Al_katraz984 ho postato il codice, non ti basta?
Forse non capisci che non ho un content con un width fissa perchè le colonne 70% e 30% devono adeguarsi al variare della grandezza dell html, rimanendo 70 e 30, partendo dai 250 px fissi in poi...

se ti fai una paginetta html in blocco note e ci copi i blocchi di codice postati capisci al volo