CSS dove sbaglio?

**elmuneco** · 10-02-2010, 16:40

Ciao a tutti, ho un problema con la mia home page, in sostanza voglio che l'ultima colonna di destra stia affiancata al div centrale ma non ci riesco, mi va a capo, inoltre non posso flottare a destra perchè voglio che fra la parte centrale e la colonna di destra ci sia un margine di 10 px, di seguito l'html e il css.

stile.css

codice:

div.qsx
{			
			border-style: solid;
			border-color: #000000;
			border-width: 7px;
			text-align: center;
			font-family: verdana;
			font-size: 12px;
			color: #000000;
			background-color: #003399;
			width: 186px;
			height: 800px;
			float:left;
			margin-top: 10px;

}

div.qtesta
{
			border-style: solid;
			border-bottom-width: 7px;
			border-left-width: 7px;
			border-right-width: 7px;
			text-align: center;
			font-family: verdana;
			font-size: 12px;
			color: #000000;
			background-color: #000000;
			width: 1222px;
			height: 178px;

}


div.qce
{
			border-style: double;
			border-color: #000000;
			border-width: 7px;			
			text-align: center;
			font-family: verdana;
			font-size: 12px;
			color: #000000;
			background-color: #0066CC;
			width: 767px;
			height: 800px;
			margin-top: 10px;
			margin-left: 206px;
			
			
}

div.qdx
{
			border-style: solid;
			border-color: #000000;
			border-width: 7px;
			text-align: center;
			font-family: verdana;
			font-size: 12px;
			color: #000000;
			background-color: #003399;
			width: 186px;
			height: 800px;
			margin-top: 10px;
			margin-left: 1020px;
									
}

html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">

	</head> 
		<title> prova </title>
		
		<link rel="stylesheet" type="text/css" href="stile.css">

	</head>


<body bgcolor="#FFFFCC" background="">



<caption>
	<div class="qtesta">

	[img]/grafica/head.gif[/img]

	</div>

</caption>
	
<div class="qsx">
					
</div>	


<div class="qce">

</div>


<div class="qdx">
					[img]grafica/adv.gif[/img]

</div>


</body>

</html>

in sostanza il qdx va a capo mentre dovrebbe stare a destra del qce, come fa esattamente il qce con qsx.
Metto un disegnino esplicativo

grazie in anticipo

**Mich_** · 10-02-2010, 17:34

Anzitutto un errore grave: aver usato un titolo non significativo. A norma di regolamento devo chiudere (riapri con un titolo consono).

Hai mescolato formattazione tramite attributi HTML e CSS: in tal modo i brwoser interpretano come vogliono (e` impossibile fare una cosa cross-brwoser).

Hai usato tag HTML nel posto sbagliato e in modo non semantico (anche in questo caso i browser possono interpretare bene o come vogliono).

Comunque il modo corretto per affiancare oggetti e` usare il float: nel tuo caso tutto float left, dato che vuoi un margine definito tra un blocco e l'altro.
E una buona cosa e` racchiudere tutti i blocchi da affiancare in un blocco contenitore largo abbastanza da contenere tutte le width , margini, border, padding. Prima di chudere tale blocco, e` necessario metterci un clear, per forzare il blocco a contentere i float (che altrimenti flottrebbero liberi).

Discussione: CSS dove sbaglio?

Strumenti discussione

Ricerca discussione

Visualizza

CSS dove sbaglio?

Permessi di invio