• User Attivo

    Contenitore centrale con scroll e box laterali fissi

    Salve a tutti,
    ho un problema con un template, composto da 3 div
    il primo div #left (che conterrà altri div)
    il secondo div #center
    e il terzo div #right (che conterrà altri div)

    vorrei che il div laterali restino fissi, mentre quello centrale no, come posso risolvere? grazie a tutti

    ho provato in questo modo:

    
    #wrapper {
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    } {
    	width: 528px;
    	float: left;
    }  {
    	float: left;
    	width: 204px;
            position: fixed;
    } {
    	float: right;
    	width: 200px;
            position: fixed;
    }
    
    

  • User Attivo

    Per un div fluido, ovvero che si allunghi in base al contenuto, basta non inserire un altezza preimpostata.
    Per i div laterali e quindi "fissi" devi importare un'altezza in pixel o percentuali e decidere cosa fare dell'eventuale contenuto in eccesso (se nasconderlo, creare una scrollbar o che esca dal div).

    #wrapper {
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #center {
    	width: 528px;	**/*Basta non inserire il valore height e il div si allunga in base al contenuto*/**
    	float: left;
    } 
    #left {
    	float: left;
    	width: 204px;
    	height: 80%;	**/*Altezza del div sinistro, per esempio 80% della pagina*/**
    	overflow:hidden;	**/*Con hidden il contenuto che non ci sta più nel div verrà nascosto, se metti overflow:scroll creerà uno scroll*/**
            position: fixed;
    }
    #right {
    	float: right;
    	width: 204px;
    	height: 80%;
    	overflow:scroll;	**/*Con overflow scroll il testo che non entreerà in quell'80% creerà uno scroll al div stesso*/**
            position: fixed;
    }
    

  • User Attivo

    Ciao Marinski,
    ho provato con il css da te suggeritomi, ma ho lo stesso problema che avevo in precedenza, cioè il div 'right' si sovrappone al div 'left'.

    Ho risolto così, ma penso non sia il metodo giusto:

    
    <style type="text/css">
    #wrapper {
    	width: 960px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #center {
    	width: 528px;
    	float: left;
    	background-color: #CCC;
    	margin-left: 200px;
    } 
    #left {
    	float: left;
    	width: 204px;
    	position: fixed;
    
    }
    #right {
    	float: right;
    	width: 200px;
    	position: fixed;
    	margin-left: 752px;
    }
    </style>