tre colonne con formattazione particolare

**Bonoz** · 04-08-2009, 17:28

un layout con tre colonne, di larghezza fissa, lunghezza variabile.
la prima, quella a sinistra, allineata in alto, con l'allineamento del testo in alto, la seconda al centro, attaccata senza margine alla prima, allineata in basso, in modo che poggi sulla base del browser, con l'allineamento interno in basso, la terza, attaccata alla destra di quella centrale, allineata in alto, con allineamento del testo interno normale (in alto)

come lo fareste con 3 o 4 div?

#sinistro {
width: 286px;
float:left;

}

#centro {
width:282px;
background-color: #ADCBED;
margin-left: 287px;
height: 100%;

}
#destro {
float: left;
left: 569px;
}

---------------------

son arrivato qua, ma non so davvero come fare i tre allineamenti...

**Mich_** · 05-08-2009, 09:56

"allineamento del testo". Non credo che vuoi allineare il testo (che significa spostare una singola riga in alto, centro basso), ma vuoi invece fare in modo che il testo in blocco si posizioni in alto o in basso.

Per poter procedere occorre sapere se il testo e` SEMPRE (*) piu` corto dell'altezza della finestra.

Comunque occorre partire da una marcatura corretta, altrimenti non ne puoi venire a capo:

codice:

<body>
  <div id="wraper">  
    <div id="sinistra">
      

testo della colonna sinistra</p>   
    </div>
    <div id="centro">
      

testo della colonna centrale</p>   
    </div>
    <div id="destra">
      

testo della colonna destra</p>   
    </div>
  </div>
</body>

NOTE:
(*) Non si verificano MAI combinazioni di dimensione browser, dimensione caratteri ecc che fanno scrollare una (o piu`) colonna o tutta la finestra
(**) Le specifiche di XHTML 1.0 richiedono che il testo sia inserito in un tag specifico. Il

e` il piu` comune, ma ci sono altri tag corretti a seconda del contesto semantico, ad esempio <ul>[*]... , <table><tr><td>... , ecc.
Inoltre il

serve per inscatolare il testo in un oggetto di tipo blocco (che quindi puo` venir spostato)
(***) In qualche caso occorre dare delle dimensioni minime al wrapper, per cui in caso che la finestra sia piu` piccola si avranno le barre di scrolling (non particolarmente bello, ma fa funzionare questa struttura in tutte le condizioni)

Discussione: tre colonne con formattazione particolare

Strumenti discussione

Ricerca discussione

Visualizza

tre colonne

Permessi di invio