Float e altezza contenitore

Salve, mi capita spesso di dover fare un website su varie colonne, quindi per creare ad esempio una colonna a destra attribuisco ad essa float: right;, ma può capitare che questa colonna è piu' alta del contenuto a sinistra e quindi va a finire che il container (in cui ci sono entrambe le colonne) arriva all' altezza del contenuto a sinistra e la colonna di destra lo supera uscendo fuori. Voi come fate per ovviare a questo problema?

[karl94]

Puoi:

• Impostare sul contenitore la proprietà CSS overflow su un qualsiasi valore diverso da visible (per esempio hidden).
• Aggiungere alla fine del contenitore un elemento (di solito si usa hr, per questioni di semantica) ed impostare su esso la proprietà clear sul valore both.

Per contenitore intendi quello che ha float: right o il container generale in cui c'è anche l' altro contenuto? A me servirebbe che il container generale si adattasse all' altezza della colonna destra che ha float: right

[karl94]

Il contenitore è l'elemento che contiene le colonne posizionate mediante float, quello che tu hai chiamato con il termine inglese container (io preferisco chiamarlo in italiano).

Ok, quindi.. Se ad esempio ho questo caso:

<div id="container">
<div id="content">
Blabla
</div>
<div id="right">
Qua il contenuto<br />
Contenuto 2<br />
test
</div>
</div>

Dove il div con id "right" ha come proprietà float: right, mettendo prima dell' ultimo </div> che indica la chiusura del container

<hr style="clear: both;">

Il contenitore dovrebbe venir alto quanto la colonna di destra giusto? Col primo metodo che hai scritto invece non viene nascosto il contenuto "in eccesso" della colonna a destra?

[karl94]

Entrambi i metodi funzionano, provare per credere!

Va bene mi fido, grazie dell' aiuto

Oggi ho testato le due soluzioni che mi avevate dato, ovvero: 1. overflow hidden al contenitore; 2. un elemento blocco con "clear: both" prima della chiusura del container.


Li ho provati entrambi, ed ecco i risultati:

1. Con overflow hidden il "contenuto" in più della colonna flottante non viene mostrato;

2. Col blocco con clear: both non succede nulla.


Avete altre soluzioni?