posizionare 7 div affiancati

**Buzzz** · 02-10-2009, 15:39

io dovrei posizionare 7 div uno di fianco all'altro, ognuno deve misurare 14px e un margine a sinistra di 2.5px, in modo da occupare piu o meno tutto lo spazio del div..
gli do le percentuali come larghezza perchè quando restringo la pagina queste devono adattarsi.. cè un problema però..

io a tutti i div do: float:left; margin-left:2.5px; width:14%; background:#990000;

cosa succede? che l'ultimo div quando restringo il browser si posiziona sotto agli altri, solo lui e non anche gli altri, invece deve rimanere affianco agli altri..

sapete come posso posizionarli uno di fianco all'altro e che rimangan sempre affiancati anche se restringo il div?

grazie!

**mucu** · 02-10-2009, 15:51

sei sicuro che ti servano i div e non una table o una lista o qualche altro tag migliore?
per risponderti: lavorando con le percentuali andrai in contro al problema dell'arrotondamento in caso di resize della finestra o di misure strane del video

**fcaldera** · 02-10-2009, 15:52

fermao restando considerazioni sui tag più appropriati, leggi questa discussione
http://forum.html.it/forum/showthrea...ghlight=margin

**Buzzz** · 06-10-2009, 16:04

non sono neancora riuscito a risolvere il mio problema..

io dovrei mettere 7 div uno di fianco all'altro, ognuno deve essere di 14.5% di width circa, in modo che quando restringo la pagina del browser questi div ri restringano e questi DEVONO rimanere sempre uno fianco all'altro quando restringo la pagina..

come posso fare?? grazie!

**fcaldera** · 06-10-2009, 21:04

riadattato dall'esempio che ti ho postato su:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>xhtml 1.0</title>
 
        <style>
        #contenitore {
            margin          : 0 auto;
            width           : 100%;  
            border          : 1px red solid;
            overflow        : hidden;
        }

        .fl_wrapper {
            height          : auto;
            overflow        : hidden;          
            width           : 101.6%;
        }

        .fl {
            float           : left;
            display         : inline;
            width           : 12.8%;
            margin          : 0 1.47% 0 0;  
            background      : #d12420;
        }

        </style>
    </head>

<body>


    <div id="contenitore">

       <div class="fl_wrapper">

           <div class="fl">1</div>
           <div class="fl">2</div>
           <div class="fl">3</div>
           <div class="fl">4</div>
           <div class="fl">5</div>
           <div class="fl">6</div>
           <div class="fl">7</div>

           <div class="fl">8</div>
           <div class="fl">9</div>
           <div class="fl">10</div>
           <div class="fl">11</div>
           <div class="fl">12</div>
           <div class="fl">13</div>
           <div class="fl">14</div>

           <div class="fl">15</div>
           <div class="fl">16</div>
            
       </div>
    </div>

</body>
</html>

l'ho provato solo su FF 3.5 e funziona.
A te la prova sugli altri browser e gioca sulle larghezze e sui margini se necessario

**Buzzz** · 06-10-2009, 22:25

direi che è perfetto!!
l'ho provato cosi in due secondi e funziona proprio come volevo io..
domani provo ad adattarlo nella mia pagina e vediamo se funziona tutto veramente bene..

intanto grazie 1000!

**Buzzz** · 07-10-2009, 21:58

funziona perfettamente anche nella mia pagina.. grazie ancora!

una cosa..
se volessi metterne 7 sopra, altri 7 sotto ed altri 7 sotto a quelli sotto per capirci.. come posso fare? devo creare 3 content uno sotto l'altro? o cè un modo più "veloce"?

**Mich_** · 08-10-2009, 08:42

Originariamente inviato da Buzzz
se volessi metterne 7 sopra, altri 7 sotto ed altri 7 sotto a quelli sotto per capirci.. come posso fare? devo creare 3 content uno sotto l'altro? o cè un modo più "veloce"?

Se (come mi pare di aver capito) nella larghezza del contenitore ci stanno solo 7 blocchetti, non devi far altro: l'ottavo va a capo per conto suo. Vedi l'esempio di fcaldera.
Altrimenti occorre un contenitore per ogni "riga"; alla fine di ogni riga ci vuole un clear.

**Buzzz** · 08-10-2009, 13:44

difatti dopo me ne sono accorto.. xD

---

io ho 7 div messi uno fianco all'altro..
sono larghi 12.8% ciascuno e quando restringo il browser questi si restringono naturalmente..
ora vorrei far si che quando si restringe orizzontalmente, si restringesse anche verticalmente, in modo da essere sempre un quadrato.. come posso fare?

**Mich_** · 08-10-2009, 14:42

ora vorrei far si che quando si restringe orizzontalmente, si restringesse anche verticalmente, in modo da essere sempre un quadrato..

Questa e` una cosa piu` complessa ...

Mi risulta che non sia possibile avere una soluzione in CSS puro. Pero` si puo` risolvere con un minimo di JS. Se ti interessa, sposto il thread nel forum corrispondente.

Discussione: posizionare 7 div affiancati

Strumenti discussione

Ricerca discussione

Visualizza

posizionare 7 div affiancati

Permessi di invio