spaziatura tra due float allineati senza usare il margin

**fabrrrri** · 19-09-2009, 14:39

Siccome usando il margin right poi non mi allinea poi bene i blocchi, secondo voi come faccio a creare uno spazio tra i due blocchi ? I blocchi hanno una lunghezza predefinita

**fabrrrri** · 20-09-2009, 14:54

possibile che non c'è un modo per spaziare i blocchi solo al centro ?

**fabrrrri** · 21-09-2009, 14:49

nessuno sà darmi una mano ? Col margin-right fa schifo l'allineamento

**Mich_** · 21-09-2009, 16:37

Impossibile rispondere con quanto scrivi.

Anzitutto "fa schifo" e` una cosa soggettiva, e non da` nessuna indicazione di quale sia il problema.

E poi ci sono altri termini ambigui:
- allineare: intendi verticalmente o orizzontalmente?
- i blocchi: quali?
- creare uno spazio: anche questo forse e` nella tua testa, ma non e` spiegato abbastanza.
Inoltre non hai specificato in quale/i browser hai testato, e quale e` l'effetto che non ti piace.

In pratica, se vuoi aiuto devi postare:
- il codice HTML dei blocchi in questione e del loro contenitore
- il codice CSS degli stessi blocchi
- il DOCTYPE
- (se credi) uno schema grafico del risultato che vuoi

In alternativa posta un link alla pagina, con spiegato dove e` il problema estetico.

**fabrrrri** · 22-09-2009, 18:45

Mettiamo che tu abbia un blocco in alto e due blocchi al di sotto di questo, e tu li voglia allineare, uno a sinistra, e uno a destra, allineati perfettamente a quello sovrastante.

Come fai ?

Io adesso con float li ho fatti affiancare, e ho usato margin-right per creare una spaziatura tra di loro, però quello più a destra non sarà mai allineato perfettamente con quello in alto perchè col margin right il blocco poi va a capo.

P.S. i blocchi devo essere flottanti perchè il loro contenuto è generato dinamicamente, quindi ce ne saranno tanti tutti incolonnati. se no era facile

**fcaldera** · 22-09-2009, 19:16

ci sono diversi workaround per fare ciò che chiedi. Ad esempio con i browser che supportano nth-child potresti azzerare il margine di destra a tutti blocchi in posizione pari

div#contenitore:nth-child(even) {
margin-right: 0;
}

non potendo contare su un supporto decente di questa pseudoclasse usiamo un altro modo

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           : 850px;  
            background      : #d8d8d8;
            overflow        : hidden;          
        }

        .bloccorosso {
            width           : 400px;
            margin          : 0 50px 20px 0;
            float           : left;
            display         : inline;
            background      : #d12420;
        }

        #wrapper {
            height          : auto;
            overflow        : hidden;          
            width           : 900px;
        }
        </style>
    </head>

<body>


    <div id="contenitore">

       <div id="wrapper">

       <div class="bloccorosso">...</div>
       <div class="bloccorosso">...</div>
       <div class="bloccorosso">...</div>
       <div class="bloccorosso">...</div>
       <div class="bloccorosso">...</div>
       <div class="bloccorosso">...</div>
       <div class="bloccorosso">...</div>

       </div>
    </div>

</body>
</html>

**fabrrrri** · 22-09-2009, 19:33

grazie mille, proverò.

Ma impostando il margin-right del blocco rosso a 50px non è lo stesso ? Perchè non dovrebbe andare a capo ?

il blocco nero deve stare all'interno del wrapper ?

**fcaldera** · 22-09-2009, 20:35

Originariamente inviato da fabrrrri
grazie mille, proverò.

Ma impostando il margin-right del blocco rosso a 50px non è lo stesso ? Perchè non dovrebbe andare a capo ?

perchè l'overflow hidden del blocco più esterno taglia tutto ciò che supera gli 850px
mentre i div flottati si trovano in un contenitore intermedio largo 900

Discussione: spaziatura tra due float allineati senza usare il margin

Strumenti discussione

Ricerca discussione

Visualizza

spaziatura tra due float allineati senza usare il margin

Permessi di invio