Celle allineate indistintamente dal contenuto

[Mister]

Ciao…

Esempio: ESEMPIO

Ho provato in tutti i modi a mettere height:100% in tutte i div, ma senza risultati…
Vorrei far si che, indistintamente dal contenuto, i tre riquadri che vedete nell’esempio siano allineati tutti allo stesso livello… cioè: se a destra c’è più testo a sinistra e al centro il border venga allineato come a destra…

L’esempio di questa pagina dovrebbe farvi capire meglio.
Esempio: ESEMPIO
Sopra è riportato come risulta con il codice…nella gif sotto come mi piacerebbe fosse…

Grazie a tutti

Codice CSS che trovate anche nel htm:

html, body {margin:0px;padding:0px;text-align: center; }
#header {height:40px; background-color:#993300; width:760px;}
#contenuto {width:760px; background-color:#fff;}
#sinistra {width: 160px; float:left; border: 1px solid #ccc;}
#centro {width: 280px; float:left; border: 1px solid #ccc;}
#destra {width: 280px; float:left; border: 1px solid #ccc;}
.clear {clear:left;}
#footer {height:40px; background-color:#993300; width:760px;}
#esempio { background-image: url(esempio.gif); width:622px; height:200px; background-repeat: repeat-no;}

Codice HTM:
<div id="header"></div>
<div id="contenuto">
<div id="sinistra">sinistra</div>
<div id="centro"> centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro centro </div>
<div id="destra"> destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra destra </div>
</div>
<div class="clear"></div>
<div id="footer"></div>
<div id="esempio"></div>

[Mister]

Potreste dirmi almeno se è fattibile?

Grazie

[Mich_]

Certo che e` fattibile.

Prova a mettere
height: 100%;
nei tre blocchi flottati.

Pero` potrebbe essere che devi anche definire l'altezza dei blocchi html e body, oltre che del contenitore.

[Mister]

Originariamente inviato da Mich_
Certo che e` fattibile.

Prova a mettere
height: 100%;
nei tre blocchi flottati.

Pero` potrebbe essere che devi anche definire l'altezza dei blocchi html e body, oltre che del contenitore.

Intanto ti ringrazio per la risposta..
.
ho inserito height: 100%; nei tre blocchi, in html e body e pure nel div #contenuto che racchiude i 3 blocchi...

questo è il risultato .. in effetti mi fa il 100% pero' mi esce la barra scroll, mentre io volevo che i tre blocchi finissero quando termina il contenuto del testo all'interno, come nell'esempio della gif riportato sotto
Grazie

[Mich_]

Forse ci sono dei bordi o padding o margin da qualche parte, per cui sommati al 100% sforano l'altezza totale.

Prova a fare il conto, poi eventualmente comincia ad abbasare un pelo il 100%.
se non funziona, passa alla gestione dell'overflow.

[Mister]

Originariamente inviato da Mich_
Forse ci sono dei bordi o padding o margin da qualche parte, per cui sommati al 100% sforano l'altezza totale.

Prova a fare il conto, poi eventualmente comincia ad abbasare un pelo il 100%.
se non funziona, passa alla gestione dell'overflow.

Margin e padding credo siano OK

html, body {margin:0px;padding:0px;text-align: center; height:100%;}
#header {height:40px; background-color:#993300; width:760px; }
#contenuto {width:760px; background-color:#fff; height:100%; }
#sinistra {width: 160px; float:left; border: 1px solid #ccc; height:100%;}
#centro {width: 280px; float:left; border: 1px solid #ccc; height:100%; }
#destra {width: 280px; float:left; border: 1px solid #ccc; height:100%; }
.clear {clear:left;}
#footer {height:40px; background-color:#993300; width:760px;}
#esempio { background-image: url(esempio.gif); width:622px; height:200px; background-repeat: repeat-no;}

Modificare l'altezza riducendola non porta al risultato desidarato
Per quanto riguarda overflow li ho provati tutti visible, auto hidden... ma niente da fare nulla porta al risultato riportato nell'immagine di esempio
Grazie..

[Mich_]

Ci sono in effeti i bordi.
100% di altezza + 2 px di bordo fanno piu` del 100%.

In tali casi si puo` impostare 98% o giu` di li`.
Eventuamente puoi aggiungere qualcosa come 3 px di padding in fondo al testo (tag

), oppure un

contenente solo uno spazio in fondo (tanto per non far sovrapporre il testo al bordo).

PS: il testo non puo` stare direttamente dentro un <div>: il testo deve stare dentro i suoi tag appositi, il piu` comune e` il

.
Se usi XHTML Strict viene segnato l'errore, altrimenti e` solo un errore semantico (che pero` puo` avere risvolti sul CSS).

[Mister]

Originariamente inviato da Mich_
Ci sono in effeti i bordi.
100% di altezza + 2 px di bordo fanno piu` del 100%.

In tali casi si puo` impostare 98% o giu` di li`.

Anche riducendo al 80% non va bene...

[Mich_]

Forse non ci siamo capiti.
Io intendevo mettere il 98% di altezza per i tre blocchi flottati; non il contenitore.

Invece vedo nel tuo esempio2 che hai lasciato il 100% nei flottati e hai specificato 80% del contenitore.

[Mister]

Originariamente inviato da Mich_
Forse non ci siamo capiti.
Io intendevo mettere il 98% di altezza per i tre blocchi flottati; non il contenitore.

Invece vedo nel tuo esempio2 che hai lasciato il 100% nei flottati e hai specificato 80% del contenitore.

Ti ringrazio per la tua disponibilità...sei molto gentile..

avevo provato..ho inserito e modificato height:98% in tutte le salse..
ora è nei 3 blocchi... ma nulla.