[CSS]Problema con i float

MEMon · 31-07-2007, 00:15

Ragazzi guardate questa paginetta di test: http://allejp.netsons.org/varie/test.html
se provate a ridurre la larghezza della pagina vedrete sovrapporsi i due rettangoli, come posso evitare ciò?
Ho anche messo un div con clear:both sotto ma non cambia nulla... come posso fare??

phlebotomus · 31-07-2007, 00:58

Quote:

Originariamente inviato da MEMon

se provate a ridurre la larghezza della pagina vedrete sovrapporsi i due rettangoli, come posso evitare ciò?
Ho anche messo un div con clear:both sotto ma non cambia nulla... come posso fare??

A parte che in FF2 ed IE7 il box di dx va a finire sotto a quello di sx senza sovrapporvisi (magari parli di IE6, uno dei peggiori browser al mondo - benché il più diffuso - nella gestione dei CSS)... te cosa vorresti ottenere?

MEMon · 31-07-2007, 00:59

No scusami, intendevo proprio quel difetto, ovvero che il box blu va sotto a quello rosso, io vorrei invece che gli si affiancasse e basta

phlebotomus · 31-07-2007, 01:27

Non capisco il senso di questi due rettangoli... in mezzo non c'è niente?

MEMon · 31-07-2007, 12:54

Quello che voglio ottenere è avere qualcosa di fisso a sinistra(blocco rosso) e qualcosa invece che sta tutta a destra ma che se stringo la pagina si avvicina in modo da assere sempre visibile.
Solo che non voglio che mi vadi poi sotto al blocco rosso, ci si deve, al massimo, appoggiare...

phlebotomus · 31-07-2007, 14:21

Siccome tra il box di dx e quello di sx non c'è niente (di solito nei layout a 3 colonne c'è il box principale centrale), strettendo la finestra, credo sia normale che il box di dx vada a finire sotto l'altro. E questo succede piuttosto presto perché ha una larghezza fissa (in pixel).
Prova un attimo a metterla in % (almeno quella del box di dx), tipo 50 0 60%, e guarda come ti sembra (cioè: sotto ci va cmq, ma molto dopo, strettendo la finestra...).

31-07-2007, 18:23

E' normale che il blocco blu scivoli sotto quello rosso oltre una certa larghezza della finestra in quanto i due elementi non trovano sufficiente spazio per rimanere affiancanti.

Se vuoi un layout fluido su tre colonne dovresti fare così:

Codice:

<style type="text/css">

	body {
		padding:0px;
		margin:0px;
	}

	#cx {
		margin-left:100px;
		margin-right:200px;
		background:green;
	}
	
	#sx {
		position:absolute;
		top:0px;
		left:0px;
		width:100px;
		background:red;
	}
	
	#dx {
		position:absolute;
		top:0px;
		right:0px;
		width:200px;
		background:blue;
	}
	
	

</style>
 

<title></title>
</head>
<body>


	<div id="sx">&nbsp;</div>
	<div id="cx">&nbsp;</div>
	<div id="dx">&nbsp;</div>

</body>
</html>

31-07-2007, 00:15	#1
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	[CSS]Problema con i float Ragazzi guardate questa paginetta di test: http://allejp.netsons.org/varie/test.html se provate a ridurre la larghezza della pagina vedrete sovrapporsi i due rettangoli, come posso evitare ciò? Ho anche messo un div con clear:both sotto ma non cambia nulla... come posso fare??

31-07-2007, 01:27	#4
phlebotomus Senior Member Iscritto dal: Jul 2003 Città: Provincia PI Messaggi: 905	Non capisco il senso di questi due rettangoli... in mezzo non c'è niente? __________________ R7 5700X < Noctua NH-D14 > Asus ROG Strix X570-F, Lepa G1000-MA, TeamGroup T-Force Vulcan Z 32GB 3200Mhz, M2 Crucial P5+, Palit GTX 1660 Ti StormX > Benq EW3280U, Asus Xonar Essence STX > NAD C350 > ProAc Tablette 2000, Corsair Obsidian 650D. 12 trans. merc.

31-07-2007, 14:21	#6
phlebotomus Senior Member Iscritto dal: Jul 2003 Città: Provincia PI Messaggi: 905	Siccome tra il box di dx e quello di sx non c'è niente (di solito nei layout a 3 colonne c'è il box principale centrale), strettendo la finestra, credo sia normale che il box di dx vada a finire sotto l'altro. E questo succede piuttosto presto perché ha una larghezza fissa (in pixel). Prova un attimo a metterla in % (almeno quella del box di dx), tipo 50 0 60%, e guarda come ti sembra (cioè: sotto ci va cmq, ma molto dopo, strettendo la finestra...). __________________ R7 5700X < Noctua NH-D14 > Asus ROG Strix X570-F, Lepa G1000-MA, TeamGroup T-Force Vulcan Z 32GB 3200Mhz, M2 Crucial P5+, Palit GTX 1660 Ti StormX > Benq EW3280U, Asus Xonar Essence STX > NAD C350 > ProAc Tablette 2000, Corsair Obsidian 650D. 12 trans. merc.

31-07-2007, 00:59	#3
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	No scusami, intendevo proprio quel difetto, ovvero che il box blu va sotto a quello rosso, io vorrei invece che gli si affiancasse e basta

31-07-2007, 12:54	#5
MEMon Senior Member Iscritto dal: Dec 2002 Messaggi: 3359	Quello che voglio ottenere è avere qualcosa di fisso a sinistra(blocco rosso) e qualcosa invece che sta tutta a destra ma che se stringo la pagina si avvicina in modo da assere sempre visibile. Solo che non voglio che mi vadi poi sotto al blocco rosso, ci si deve, al massimo, appoggiare...

Strumenti
Mostra una versione stampabile Invia questa pagina per email