div a larghezza fissa e div liquidi

**lexdi** · 21-11-2007, 16:23

un saluto a tutto il forum innanzitutto, con i miei ringraziamenti per tutto quello che continuo ad apprendere leggendo i vostri post.

Sono alla mia prima esperienza con i css ed il layout e mi trovo davanti ad un problema cui non riesco a venire a capo.

Qui c'è la pagina incriminata

come potete leggere nel box grigio (scusate i colori ma mi servono per capire com'è la resa sui vari browser) ho bisogno che il box a sinistra sia di larghezza variabile mentre quello destro sia di larghezza fissa. I 4 box nel riquadro sx devono coprire l'intero box restando sempre uguali tra loro ma adattandosi alla larghezza del loro contenitore.

Questo è il meglio che ho ottenuto. Mi lascia perplesso il fatto che ottengo questo solo con la proprietà overflow e settando width al 49%. Se metto 50% i mini-box si dispongono uno sotto l'altro.

Il fatto è che non capisco quale possa essere l'errore, perchè qualcosa sto sicuramente sbagliando.

Grazie mille a tutti

Lexdi

**lexdi** · 22-11-2007, 01:11

per comodità posto direttamente il codice qui
il foglio di stile

codice:

html{
	margin:0;padding:0
}

body{
	font: 12px Verdana,Arial,sans-serif;
}
div#contenuto{
}
div#colonna_evento{
	overflow:hidden; 
	height:380px;
	background-color:yellow;	
}
.evento{
	float:left;
	width:49%;
	height:50%;
	padding:2px 2px 2px 2px;
}
.testo_evento{
}
div#box{
	float:right;
	width:400px;
	height:380px;
	background-color:#E6E6E6;
}

e anche l'html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Casa Pagina</title>
</head>
<body>
	<div id="contenuto">
	<div id="box">testo</div>
	<div id="colonna_evento">
		<div class="evento">
			<p class="testo_evento">testo</p>
		</div>
		<div class="evento">
			<p class="testo_evento">testo</p>
		</div>
		<div class="evento">
			<p class="testo_evento">testo</p>
		</div>
		<div class="evento">
			<p class="testo_evento">testo</p>
		</div>
	</div>
</div>
</body>
</html>

non sapete darmi una dritta o una direzione da prendere per risolvere il problema?
Grazie a tutti

Lexdi

**Mich_** · 22-11-2007, 10:01

In effetti stai sbagliando i conti.
I blocchi con class="evento" son larghi:
49%+4px, che a seconda del totale dello spazio puo` essere piu` o meno del 50%. Se e` piu` del 50% e` chiaro che non ci sta, e il comportamento dei float e` proprio di andare a capo se non c'e` il posto.
(questo comportamento e` diverso in IE quirks mode, dove i conti si fanno in modo diverso)

Rivediti un tutorial CSS, alla voce "box model".

Puoi ovviare eliminando il padding (che e` uno degli attributi che si comportano diversamente nei vari browser); in qualche caso il padding e` sostituibile con il margin, che non ha i problemi di cross-browser.
Comunque se vuoi una copertura "perfetta" dello spazio (come sarebbe se i blocchi devono avere colore diverso), dovrai studiare dei margini/padding espressi in %; se invece gli sfondi sono tutti uguali, puoi giocare con il float a destra o a sinistra e gli spazi liberi.

**lexdi** · 22-11-2007, 11:25

grazie mille!
preziosissimo come sempre.
Vado a rileggere e metto a posto tutto.

Ciao e buona giornata.

Lexdi

Discussione: div a larghezza fissa e div liquidi

Strumenti discussione

Ricerca discussione

Visualizza

div a larghezza fissa e div liquidi

Permessi di invio