Tre div, una colonna liquida... Impresa assurda

**Scellino02** · 10-08-2007, 12:42

Ciao a tutti, sto utilizzando uno script che mi permette di nascondere e mostrare un div a mio piacimento.

Questo script funziona benissimo, l'ho strausato in un layout a tabelle... ora sto realizzando lo stesso sito usando solo div e css e sto praticamente impazzendo perchè non sono per niente pratico di css!

la domanda è questa: Avendo un div contenitore e tre div(tipo tre colonne) da posizionare uno di fianco all'altro come si fa?
I div mi servono tutti all'interno del contenitore e non devono essere nidificati tra loro, ognuno deve stare per conto suo... e in più devo far in modo che quando nascondo il div "TerzaColonna" con il mio script, il div "PrimaColonna" deve allargarsi fino alla fine del contenitore e spingere a destra anche il div "SecondaColonna".
So che è fattibile in qualche modo ma non so più cosa provare, datemi qualche dritta!

Ragazzi ve lo giuro ci sto smanettando da ieri, non ci riesco, ho bisogno di un aiuto, di un esempio... Aiutatemi, per pietà ve lo chiedo!

Grazie 1000 anticipatamente!

**fcaldera** · 10-08-2007, 13:09

non so se è esattamente ciò che vuoi (l'ho fatto in velocità e provato solo su Firefox) ma prova a lavorare su questo esempio (eliminando le colonne c1 e c2 e vedendo che succede)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>xhtml 1.0</title>
        
        <style type="text/css">
            #groupcol {
                width   : 960px;
                height  : auto;
                overflow    : hidden;
                border  : 1px solid #767676;
            }
            
            #groupcol div {
                width   : 300px;
                border  : 1px solid #cca;
                float   : right;
                display : inline;
                margin  : 0 8px;
                
                height  : auto!important;
                height  : 300px; 
                min-height :  300px;
            }
            
            
        </style>
        
    </head>

<body>

    <div id="groupcol">
    
   
        <div id="c1">
            colonna 1
        </div>
        <div id="c2">
            colonna 2
        </div>

        


            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue augue, 
            varius facilisis, eleifend sed, adipiscing nec, eros. Curabitur condimentum. Sed 
            ultricies, metus feugiat aliquet commodo, est nibh tincidunt urna, id placerat orci
            neque vitae orci. In odio nunc, dapibus sed, suscipit et, sodales id, diam. Nam ut 
            tellus at sapien consequat faucibus. Maecenas dignissim ante vitae nisi hendrerit 
            accumsan. Etiam adipiscing dolor. Donec nibh. Fusce nunc purus, tempor a, rutrum ut, 
            iaculis at, ipsum. Pellentesque sodales. Suspendisse interdum tortor gravida velit. 
            Vestibulum felis nulla, facilisis sit amet, venenatis sed, luctus eget, justo. Sed 
            feugiat. Aliquam erat volutpat.
        </p>
        
    </div>

</body>
</html>

**Scellino02** · 10-08-2007, 13:11

Ragazzi, vorrei aggiungere una cosa... mi sono aiutato con questa soluzione:
http://html.it/articoli/esempi/artic...eg/mn3col.html

Con questo metodo(anche i margini negativi) rieco a posizionare i div come desideravo, ma mi resta il problema che quando nascondo la colonna di destra del mio layout, le altre due colonne(quella centrale e quella di sinistra) non si allargano verso destra.

Ho pubblicato anche il risultato delle mie prove quì: http://www.pallavoloavellino.it/nuovo/index_wid.htm

In effetti i div interessati sono quello azzurro che è la Prima colonna, quello stretto bianco che sarebbe la seconda colonna e il fine quello rosso che è la terza colonna(quella che devo nascondere)

mi date una mano?

**Scellino02** · 10-08-2007, 13:16

Mitico fcaldera, non avevo visto la tua risposta... grazie! Provo subito!

**Scellino02** · 10-08-2007, 13:35

fcaldera, è perfetto! Funziona alla grande!
Ti ringrazio Infinitamente!

**fontlover** · 10-08-2007, 14:36

Originariamente inviato da fcaldera
non so se è esattamente ciò che vuoi (l'ho fatto in velocità e provato solo su Firefox) ma prova a lavorare su questo esempio (eliminando le colonne c1 e c2 e vedendo che succede)

..... genio!

Discussione: Tre div, una colonna liquida... Impresa assurda

Strumenti discussione

Ricerca discussione

Visualizza

Tre div, una colonna liquida... Impresa assurda

Permessi di invio