Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2007
    Messaggi
    76

    contenitore di 4 colonne altezza variabile

    Salve a tutti,

    sto realizzando una pagina che prevede 4 colonne affiancate di altezza variabile. dato che vorrei che ogni colonna abbia la solita altezza ho pensato bene di mettere al contenitore di queste 4 colonne un'immagine di background ripetuto sull'asse delle y che ricalca gli sfondi delle colonne (bianco per la prima, grigio per l'ultima).
    il problema è che il contenitore delle colonne sembra non sentire l'altezza delle colonne e rimane appiattito in cima, non si visualizza quindi il background impostato. questo accade con Firefox e IE8. Con Ie6 o IE7 ottengo il risultato voluto.

    la pagina che sto creando si può visualizzare a
    juno.altervista.org/colonne/home.html

    Questo è il codice, spero che qualcuno mi sappia aiutare a risolvere questo problema

    Codice PHP:
    <style>
        
    #main-container
        
    {
            
    float:left;
            
    width:100%;
            
    background-color:#F5F5F6;
        
    }
        
        
    #cols-container
        
    {
            
    width:995px;
            
    background:url(images/body_bg.jpgrepeat-y;
            
    margin:0 auto;
        }
        
        
    #col1
        
    {
            
    width:235px;
            
    float:left;
        }
        
        
    #col2
        
    {
            
    width:235px;
            
    float:left;
        }
        
        
    #col3
        
    {
            
    width:335px;
            
    float:left;
        }
        
        
    #col4
        
    {
            
    float:left:
            
    width:190px;    
        }
        
        
    </
    style>


    <
    div id="main-container">
        <
    div id="cols-container">
            <
    div id="col1">
                
    Testo


               
            
    </div>
            
            <
    div id="col2">
                
    Testo

                
            
    </div>
            
            <
    div id="col3" >
                
    Testo

                Testo

                Testo

            
    </div>
            
            <
    div id="col4">
                
    Testo


            
    </div>
            
        </
    div>
    </
    div

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    E` il solito problema della mancanza del clear (affrontato migliaia di volte nel forum - fa' una ricerca prima di postare): un oggetto float esce dal flusso dei blocchi, ma puoi costringerlo a rientrare con un clear.
    Vedi ad esempio: [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it
    Registrato dal
    Jun 2007
    Messaggi
    76
    grazie per l'indicazione, sono riuscito a risolvere il mio problema.

    non sapevo cosa cercare con esattezza sul forum (non sapevo a cosa fosse legato fosse il problema), per questo ho postato.

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.