altezza di due div "floattati"

**danka** · 05-12-2006, 13:14

ciao a tutti
ho due div affiancati, uno con float:left, l'altro con float:right
vorrei che l'altezza dei due div sia uguale indipendentemente dal loro contenuto
ho cercato in rete e qui sul forum ma consigliano di utilizzare un elemento con "clear:both" oppure l'hack chiamato clearfix
ho provato entrambi ma non funzionano, o non sono stato capace di farli funzionare

lo style è questo

codice:

.container { width: 536px;}
.uno {float: left;}
.due {float: right; background: #EAEAEA;}

e l'xhtml è questo:

codice:

<div id="container">
	<div class="uno">
		aaaaaaaaaaaaa

		aaaaaaaaaaaaa

		aaaaaaaaaaaaa

		aaaaaaaaaaaaa

		aaaaaaaaaaaaa

		aaaaaaaaaaaaa

	</div>
	<div class="due">
		bbbbbbbbbbbbbbb

	</div>
	<br style="clear:both;" />
</div>

come si può fare?

**pidgey** · 05-12-2006, 13:46

Non so se è questo quello che esattamente vuoi, però potresti inpostare la stessa altezza al div uno e al div due e inserire ad entrambi la propietà di stile overflow con il valore ad auto, in modo tale che se il contenuto aumenta, ci sarà una barra di sorrimento all'interno del div, ma l'altezza dei due box rimarra invariata.

<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" >
.container { width: 536px;}
.uno {float: left; height:100px; width:200px; overflow: auto; border:1px solid #000;}
.due {float: right; background: #EAEAEA; height:100px; width:200px; overflow: auto; border:1px solid #000; }
</style>
</head>

<body>
<div id="container">
<div class="uno">
aaaaaaaaaaaaa

aaaaaaaaaaaaa

aaaaaaaaaaaaa

aaaaaaaaaaaaa

aaaaaaaaaaaaa

aaaaaaaaaaaaa

</div>
<div class="due">
bbbbbbbbbbbbbbb

</div>
<br style="clear:both;" />
</div>
</body>
</html>

ciao

**danka** · 05-12-2006, 14:36

no, le barre di scorrimento putroppo non vanno bene
in sostanza entrambi i div devono essere alti quanto il più alto dei due.
quindi quello più corto dovrebbe "ingrandirsi" fino a raggiungere l'altezza dell'altro
ho letto appunto che un elemento con style="clear:both" utilizzato come footer dovrebbe servire appunto a questo, ma forse non ho capito bene come usarlo.

grazie e ciao

Discussione: altezza di due div "floattati"

Strumenti discussione

Ricerca discussione

Visualizza

altezza di due div "floattati"

Permessi di invio