ciao a tutti, mi sapreste dire come posso affiancare due div consecutivi senza dover ricorrere a top/left margin?
sto utilizzando i css ovviamente.
Non posso utilizzare margin perchè i div non sono statici ma dinamici, cioè potrebbero cambiare dimensione e se utilizzo top margin se allungo il primo si abbassa il secondo ovviamente, come potrei fare?
Devo utilizzare l'attributo display? su cosa dovrei impostarlo?
Grazie a tutti!
Sembra che sia alle prime armi con i vari layout.
Ti consiglio quindi due cose:
1. leggerti su una guida CSS (vedi ad esempio quella di HTML.it) il capitolo sui layout
2. andare a vedere come fanno gli altri: ci sono ottimi spunti di layout, alcuni citati tra i "link utili"
Comunque la risposta secca al tuo quesito e`: usa il float (ed eventualmente le "false colonne"). Mi rendo conto che questa risposta sara` difficile da capire, e che sarebbe necessario un esempio; io pero` non ho tempo in questo momento: se non riesci a capire dai consigli di sopra, prova a postare uno schema di quello che vuoi che forse qualcuno ti puo` dare una mano.
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
Una cosa così?Originariamente inviato da andmx
ciao a tutti, mi sapreste dire come posso affiancare due div consecutivi senza dover ricorrere a top/left margin?
sto utilizzando i css ovviamente.
Non posso utilizzare margin perchè i div non sono statici ma dinamici, cioè potrebbero cambiare dimensione e se utilizzo top margin se allungo il primo si abbassa il secondo ovviamente, come potrei fare?
Devo utilizzare l'attributo display? su cosa dovrei impostarlo?
Grazie a tutti!
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style type="text/css" media="screen"> <!-- #contenitore { width: auto; height: auto; clear: both; background: #0F0; } #left, #right { width: auto; height: auto; float: left; padding: 30px; margin: 30px; border: #000 3px solid; } #clear { clear: both; } --> </style> </head> <body> <div id="contenitore"> <div id="left">Inserire qui il contenuto per id "left"</div> <div id="right">Inserire qui il contenuto per id "right"</div> <div id="clear"></div> </div> </body> </html>
Metti il float a right solo per il div #right, si sposterà da solo, la teoria del float è la fluidità, se poni un elemento fluido a destra, lo vedrai scarrellare proprio in quella direzione e sposta il div right con il left
codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento senza titolo</title> <style type="text/css" media="screen"> <!-- #contenitore { width: auto; background: #0F0; } #right { width: auto; height: auto; float: right; padding: 30px; margin: 30px; border: #000 3px solid; } #clear { clear: both; } --> </style> </head> <body> <div id="contenitore"> <div id="right">Inserire qui il contenuto per id "right"</div> <div id="left">Inserire qui il contenuto per id "left"</div> <div id="clear"></div> </div> </body> </html>
Permessi di invio
Rispondi quotando