Visualizzazione dei risultati da 1 a 6 su 6

Discussione: problema div float

  1. #1

    problema div float

    Ciao,
    ho qualche problema con alcuni div affiancati, soprattutto con ie (specialmente ie7).
    l'obiettivo è creare 5 colonne:
    codice:
    1 - larga 20% - Contenuto 0
    2 - larga  5% - Spazio
    3 - larga 35% - Contenuto 1
    4 - larga  5% - Spazio
    5 - larga 35% - Contenuto 2
    (i div usate per lo spazio sono necessari)

    inoltre ho notato che explorer ha qualche problema ad impostare le dimensioni dei div: 20+5+35+5+35=100, ma per metterli sulla stessa devo ridurre di 1 o 2 punti percentuali la larghezza degli spazi.

    inoltre come si fa a mettere l'altezza dei div tutti alla stessa altezza in modo che quelli piu corti si "allungano" alla stessa dimensione del div più alto?

    mi potete gentilmente dare un piccolo aiuto?

    questo è il codice:
    Codice PHP:
    <!doctype html>
    <
    html>
        <
    head></head>
        <
    body>
            <
    style>
                .
    riga{
                    
    overflowauto;
                    
    width100%;
                }
                
    div{
                    
    border2px solid black;
                }
                
    #c0{
                    
    displayinline;
                    
    width20%;
                    
    floatleft;
                }
                .
    spazioSx, .spazioDx{
                    
    displayinline;
                    
    floatleft;
                    
    width5%;
                }
                
    #c1, #c2{
                    
    floatleft;
                    
    width35%;
                }
            </
    style>

            <
    div class="riga">
                
                <
    div id="c0">
                    


                        
    Contenuto0
                    
    </p>
                </
    div>
                
                <
    div class="spazioSx">
                    

                </
    div>
                
                <
    div id="c1">
                    

     
                        
    Contenuto1
    Contenuto1
    Contenuto1
    Contenuto1    

                    
    </p>
                </
    div>
                
                <
    div class="spazioDx">
                    

                </
    div>
                
                <
    div id="c2">
                    


                        
    Contenuto2
                    
    </p>
                </
    div>
            </
    div>

        </
    body>
    </
    html
    e questo è quello schifo di risultato:

  2. #2
    Il problema delle percentuali la cui somma deve essere minore del 100% è dovuto al fatto che metti i bordi con uno spessore, e quindi ti si riduce lo spazio disponibile. Quindi il div5 va a capo perchè non entra più affiancato agli altri.

    Per quei due div che devono fare solo da divisori tra gli altri tre ti consiglierei piuttosto di sostituirli inserendo i margini ai tre div principali in modo da spostare tra loro i div senza utilizzare altri div.

    Infine per la lunghezza omogenea tra i div, questo è anche un mio problema che ho postato un paio di giorni fa ma che ancora non ha ricevuto alcuna risposta..

    Se vuoi vedi quel mio posto in cui penso di star facendo un layout della pagina molto simile al tuo e potresti trovare alcuni consigli dovuti ai miei tanti tentativi..

  3. #3
    Try this at home:

    codice:
    <div style="display:table;width:100%;">
    <div style="display:table-row">
    
    <div style="display:table-cell;">contenuto</div>
    <div style="display:table-cell;width:5%;"></div>
    <div style="display:table-cell;">contenuto
    contenuto
    contenuto
    contenuto
    </div>
    <div style="display:table-cell;width:5%;"></div>
    <div style="display:table-cell;">contenuto</div>
    
    </div>
    </div>
    8)

    o/ !

  4. #4
    ciao ratte grazie per la risposta, ma il problema è che non funziona con ie7

  5. #5
    Ahhh... capito.. vero si, non avevo letto il tuo post con la dovuta attenzione... hmmm... eh... allora forse te la cavi con javascript... ho visto questo: /display-table-htc/ ..speruma bèn... 8)

    o/ !

  6. #6
    prima di tutto usa un doctype strict
    poi allinei il primo div a destra
    il secondo a sinistra
    e al terzo dai overflow:hidden

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.