Margini negativi

I margini negativi combinati ai float sono uno degli strumenti più versatili per realizzare layout basati sui CSS. Non si tratta di un argomento nuovo qui sulle pagine di HTML.it: sono stati già pubblicati infatti Layout con i margini negativi e la serie Layout Gala, di cui è disponibile una pagina indice.

Abbiamo ritenuto però che fosse necessario approfondire le basi della tecnica: sebbene il meccanismo sia piuttosto semplice, la sua comprensione totale è indispensabile per il suo utilizzo.

Il concetto dei margini negativi combinati ai float si può condensare tutto in unica frase:

Un margine negativo concorde con il lato del float ha l’effetto di traslare ulteriormente verso il lato del float l’elemento a cui è applicato; un margine negativo opposto al lato del float non ha effetto sulla posizione dell’elemento a cui è applicato, ma ha l’effetto di cedere spazio ad altri elementi affiancati sul lato del margine negativo.

Questo concetto è da tener ben presente negli esempi che seguiranno.

Margini negativi concordi con il lato del float

Presentiamo subito il primo esempio, che difficilmente troverà utilizzo pratico così com’è ma è fondamentale per la comprensione dei margini negativi. L’HTML è molto semplice. Si tratta di un unico div con un paragrafo al suo interno:

Ora il foglio di stile: nel CSS incorporato all’esempio sono presenti diverse regole, tra cui l’eliminazione di margin e padding dagli elementi html e body e l’assegnazione di un “righello” di sfondo per agevolare la comprensione. L’unica regola CSS dell’esempio fondamentale è però la seguente:

In sostanza, il div con id="box1" viene reso float a destra, con una larghezza di 500 pixel e un margine destro di -200px. In questo caso quindi l’effetto, dato che il margine negativo è concorde con il lato del float, sarà di traslare ulteriormente il div verso il lato comune, ovvero verso destra.

Visto che il float accosta il div sul lato destro della finestra del browser, il margine negativo di 200 pixel avrà quindi l’effetto di traslare l’elemento oltre la finestra del browser, a tal punto che 200 pixel dell’elemento stesso non sono visibili. L’area visibile del div dell’esempio sarà quindi 300 pixel (500 pixel di larghezza meno i 200 pixel di margine negativo).

Una piccola nota pratica: nel traslare elementi oltre gli estremi della finestra del browser un’accorgimento fondamentale è assicurarsi che non vengano generate scrollbar orizzontali in nessun browser su cui si effettuano i test di resa. La loro comparsa non è purtroppo documentata e sinceramente non mi sono molto chiari i meccanismi che le causano. Generalmente è comunque possibile adottare un diverso approccio ed evitare le scrollbar.

Margini negativi concordi con il lato del float – esempio 2

Eccoci quindi al secondo esempio, in cui i margini negativi, concordi con il lato del float, vengono usati per ottenere un layout a due colonne. Ecco il markup dell’esempio:

Anche in questo caso i margini negativi concordi con il lato del float vengono usati per traslare un’elemento verso il lato del float. Vediamo il CSS dell’esempio. Per prima cosa il div id="box1" viene reso float a sinistra e dichiarato largo 700 pixel:

Il div con id="box2", largo 200px, è quello che usa i float e i margini negativi. È reso infatti float a sinistra (e si disporrebbe naturalmente appena può, ovvero accostato sul lato destro del box1) ma viene traslato di 700 pixel verso sinistra grazie a un margine sinistro di -700 pixel, riportandosi quindi attaccato al bordo sinistro della finestra del browser. Ecco la regola:

Per evitare la sovrapposizione del contenuto dei due div, è quindi necessario un elemento all’interno di box1 con un margine sinistro proprio di 200 pixel (ovvero la larghezza di box2), con id="box1-content" che ha lo scopo di rendere quindi 500 pixel utili al contenuto per box1, alla destra del box2. Ecco la regola:

Riepiloghiamo quindi i passi logici utilizzati nella costruzione dell’esempio:

1. Il box1, largo 700px, viene reso float a sinistra
2. Il box2, largo 200px, viene reso float a sinistra e traslato di 700 px grazie al margine negativo sinistro
3. Il contenuto di box1 viene distanziato sulla sinistra di 200px (ovvero la larghezza di box1) così da evitare sovrapposizione di contenuto.

Ed ecco le tre regole CSS relative:

Il nostro esempio è così ultimato, siamo pronti a passare al successivo.

Margini negativi opposti al lato del float

Siamo cosÏ arrivati al terzo esempio, in cui i margini negativi vengono utilizzati sul lato opposto del float: in questo caso i margini negativi non hanno effetto sulla posizione dell’elemento float, ma servono a cedere spazio ad elementi affiancati sul lato del margine negativo. Cominciamo dal markup di base, che è lo stesso dell’esempio precedente:

Ora procediamo con il CSS dell’esempio. Il div id="box1" viene reso float a sinistra, con larghezza 100% e un margine destro negativo di 200 px. Ci sono alcune dettagli implementativi da approfondire: il div in questione viene reso float a sinistra così da permettere ad eventuali div di affiancarsi. Sebbene abbia larghezza 100%, grazie al margine negativo destro, e quindi opposto al lato del float, è in grado infatti di cedere 200 pixel sul lato destro.

Ed è proprio 200 pixel la larghezza del div id="box2", che, essendo float a destra, va ad accomodarsi nello spazio ceduto da “box1”. Da notare che lo stesso effetto si sarebbe ottenuto rendendo float l’elemento a sinistra. Infine al contenuto del box1, ovvero il div id="box1-content" viene assegnato un margine destro di 200 pixel, così da evitare la sovrapposizione del contenuto. Ecco quindi le tre regole CSS:

Il nostro esempio è così ultimato: rivediamolo.

Conclusioni

In questo articolo abbiamo visto tre semplici esempi spero utili per la comprensione dei margini negativi combinati con i float. La compatibilità degli esempi è buona: sono stati testati su Internet Explorer dalla versione 5.0 alla 7, Opera, Firefox e Safari.

Le potenzialità dei margini negativi, siano essi concordi od opposti al float, sono moltissime: unico neo dei questo approccio di sviluppo, è che il più delle volte sarà necessario un div aggiuntivo per regolare i margini effettivi ed evitare sovrapposizioni di contenuto.

Codice ed esempi sono disponibili per il download. Alla prossima.