allineamento verticale ed orizzontale div

**rebelia** · 02-02-2004, 01:50

sto cercando di sostituire le tabelle con i div in una pagina di tipo classico

codice:

<div esterno>
<div header>....immagine e testo..........</div>
<div menu>.........tabella menu...........</div>
<div corpo>
<div sx>..</div><div ct>..</div><div dx>..</div>
</div>
<div footer>....immagine e testo..........</div>
</div>

sl che nn riesco ad allineare correttamente i div

mi spiego: i div sn formattati in questo modo:

codice:

div#esterno{width: 780px; height: 100%; text-align: center;}
div#menu{width: 780px; height: auto;}
div#corpo{width: 780px;text-align: left;vertical-align: top;}
div#sx{position: relative; top: 0px; float: left; width: 150px; height: 100%;}
div#ct{position: relative; top: 0px; float: left; width: 480px; height: 100%;}
div#dx{position: relative; top: 0px; float: left; width: 480px; height: 100%;}
div#footer {width: 780px;}

con questa formattazione, in ie e opera i div si allineano come dovrebbero, ma in mozilla no: fino alla chiusura del div che contiene la tabella del menu, tutto ok, sotto invece si allineano:

sx (a sx) - ct (appoggiato al div sx correttamente)- img footer (appoggiato al div ct al posto del div dx)

resto del div footer, contenente (cosi' sembra a video) sulla sx il div dx!

ho accuratamente controllato l'annidamento dei div ed e' difficile sbagliare, perche' il corpo della pagina e' ancora vuoto, quindi ho le aperture e le chiusure dei tag bene sott'occhio

spero di essere stata sufficientemente chiara

grazie a chiunque mi sapra' aiutare

**Jerry Masslo** · 02-02-2004, 09:23

aggiungi al footer questo:

clear:both;

**rebelia** · 02-02-2004, 15:02

Originariamente inviato da Jerry Masslo
aggiungi al footer questo:

clear:both;

ha funzionato! :gren:
... in parte

ora nn mi resta che trovare il modo di bloccare sx-ct-dx, perche' quest'ultima continua ad andare a capo

domanda: se lo spazio totale e' mettiamo 300, le colonne possono essere 100+100+100, considerando che hanno border: 1px, oppure devono essere 98+98+98? ho fatto delle prove con controlli crossbrowsing, ma nn mi e' chiaro il funzionamento

grazie

**span** · 02-02-2004, 15:26

allora:

#dx deve avere float:right;

secondo le specifiche un box con width di 300px ne può contenere 3 con width 98 ed 1px di border, ma c'è un problema di interpretazione di explorer. La soluzione è stata trattata in questa pillola di quel gran figo di atomsurfer: http://forum.html.it/forum/showthrea...surfer+pillola :quipy:

**span** · 02-02-2004, 15:29

codice:

emh... il codice da te postato così dovrebbe funzionare

<style>
div#esterno{width: 780px; height: 100%; text-align: center;}
div#menu{width: 780px; height: auto;}
div#corpo{width: 780px;text-align: left;vertical-align: top;}
div#sx{position: relative; top: 0px; float: left; width: 150px; height: 100%;}
div#ct{position: relative; top: 0px; float: left; width: 315px; height: 100%;}
div#dx{position: relative; top: 0px; float: right; width: 315px; height: 100%;}
div#footer {width: 780px; clear: both;}
</style>
</head>

<body>
<div id=esterno>
  <div id=header>....immagine e testo header..........</div>
  <div id=menu>.........menu in alto...........</div>
  <div id=corpo>
    <div id=sx>sx</div>
    <div id=ct>ct</div>
    <div id=dx>dx</div>
  </div>
  <div id=footer>....immagine e testo footer..........</div>
</div>

Discussione: allineamento verticale ed orizzontale div

Strumenti discussione

Ricerca discussione

Visualizza

allineamento verticale ed orizzontale div

Permessi di invio