[Risolto] il div dei contenuti non scorre

davidino86

[Risolto] il div dei contenuti non scorre

salve a tutti!

intanto sono contento di aver trovato questo bel forum, sono contento perchè ho un problemino con firefox non riesco a fare in modo che dei div di contenuti si dispongano in verticale dentro un div contenitore e che quest'ultimo adatti la sua altezza secondo quanti div dei contenuti ha dentro.

non so come mandari l'html e il css.

p.s.: in IE tutto funziona come dovrebbe!

un saluto,
Davide

davidino86

ecco il codice. spero in una vostra risposta!

laburno

Ciao davidino86 e benvenuto
Vediamo, i div contenitore sono #boxgrande e #boxgrande2?

Ci dovresti postare anche il CSS, puoi copiarlo direttamente mentre scrivi il messaggio (se possibile, solo la parte che ci interessa).

davidino86

grazie laburno,

il codice css è questo

/contenuti/

#content {
width: 680px;
height: 400px;
position:relative;
top:-16px;
padding: 40px ;
padding-top: 55px;
background-image: url(img/box_contenuti.jpg);
background-repeat: repeat-x;

}

/primo box/
#boxgrande {
height:191px;
width: 630px;

}
.box1 {
position: relative;
float: left;
width:211px;
height:191px;
background-image: url(img/perche_monochroming.jpg);
margin:0;
padding:0;

height: 165px;
background-image: url(img/bg_box_interno.jpg);
width: 350px;
padding: 13px;
background-repeat: repeat-x;
position:relative;
float:left;

 
}

height: 191px;
background-image: url(img/bg_angoli_box.jpg);
width: 15px;
padding:0;
position: relative;
float: left;
;

}

width: 100%;
height: 165px;
font-family:"Trebuchet MS", Tahoma;
color: #535e67;
font-size:9pt;

}
/secondo box/

#boxgrande2 {
height:191px;
width: 630px;
margin-top: 450px;

}

position: relative;
float: left;
width:211px;
height:191px;
background-image: url(img/di_cosa_tratta.jpg);
margin:0;
padding:0;

height: 165px;
background-image: url(img/bg_box_interno.jpg);
width: 350px;
padding: 13px;
background-repeat: repeat-x;
position:relative;
float:left;

}

height: 191px;
background-image: url(img/bg_angoli_box.jpg);
width: 15px;
padding:0;
position: relative;
float: left;

}

width: 100%;
height: 165px;
font-family:"Trebuchet MS", Tahoma;
color:;
font-size:9pt;

}

quindi "#content" rappresenta il div che contiene i vari "#boxgrande" nei quali andro a mettere i contenuti come testo e immagini. i boxgrande (numerati progressivamente per i vari contenuti) potrebbero essere anche mille perche teoricamente e come si riesce ad ottenere con IE il div si allunga in verticale senza scombinare il layout a seconda dello spazio che occupano e del numero dei div con id #boxgrandeN. con firefox invece questo codice porta i boxgrande sotto il footer e il div non varia di altezza come dovrebbe mantenendo i al suo interno.

il codice del footer è questo:

/footer/

#footer {
width: 740px;
height: 64px;
position:relative;
top:-16px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
background-image: url(img/footer_bg.jpg);
background-repeat: no-repeat;
}

.navitext {
font-family:"Trebuchet MS", Tahoma;
font-size: 0.7em;
text-align:left;
color: #696567;
margin-left: 30px;

}

.navitext a {
text-decoration: none;
color:;
}

.navitext a:hover {
border-bottom:dotted 1px #FFFFFF;
color:#FFFFFF;
}

#copyright {
font-family:"Trebuchet MS", Tahoma;
color: #afbdc0;
font-size: 7.5pt;
text-align:center;
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
}

laburno

Ok, non so com'è l'HTML. Però ci sono dei float, e non hai messo dei clear.

Prova a mettere clear:both; nel footer.

davidino86

giusto! ora il footer scorre secondo lo spazio che occupano i #boxgrande ma il #content non si allarga verticalmente, non contenendo cosi i box con il suo relativo padding per i box medesimi. praticamente il footer scorre ma i box che non rientrano nell'altezz di si "poggiano" per cosi dire sullo sfondo.

cmq l'html è questo:

<body>

<!-- contenuti -->

                      <div class="text"></div>
                    </div>
                <div class="box1c"></div>
   </div>
   
   <div id="boxgrande2">
           <div class="box2"></div>
            <div class="box2a">
                <div class="text"></div>
            </div>
        <div class="box2c"></div>
   
   
   </div>

</div>

<!-- fine contenuti -->

<!-- footer -->
<div id="footer"> </footer>

davidino86

che stupido cane che sono!!!!
dovevo mettere a #content { height:auto;....}

cmq senza di te non avrei notato i clear necessari. sei un grande!quello era il mio vero problema.

grazie milleeeeeeeeee, un saluto.:D

laburno

Di niente, alla prossima