Ciao.
Ho un pannello (id#main nel codice) che ha width:auto. Questo mi serve per far espandere la finestra a tutta pagina. Width:100% non va bene perchè se uso margini, padding o bordi questi mi vanno ad aumentare il 100% e mi compare la barra di scorrimento orizzontale.
Il problema adesso è che dentro devo posizionare dei box (div.box nel codice) affincati che scorrano verso il basso in base alla risoluzione dello schermo: cioè per es. vedrò 5 box per riga se ho una risoluzione alta, 4 per riga se più bassa, poi 3 ecc. Per forza di cosa devono essere float:left, se no non fluiscono nel modo corretto.
Però quando posiziono questi box con float:left dentro il pannello con width:auto, il pannello non si adegua in altezza, cioè i box non fanno contenuto per il pannello e il pannello rimane alto qualche pixel soltanto. Come posso fare?
Ecco il codice
Codice PHP:div#main {
width:auto;
padding:10px;
background-color:red;
}
div#main .box{
float:left;
width:400px;
height:400px;
border:1px black solid;
background-color:blue;
margin:10px;
}
Allego anche un'immagine del risultato. Come si nota il pannello main (rosso) non "ingloba" i 5 box (blu)Codice PHP:<body>
<div id="main">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</div>
</body>
Rispondi quotando