3 div affiancati

**ronnin** · 24-01-2008, 17:07

ciao a tutti!
premetto che mi sono spulciata il forum alla ricerca di aiuto per risolvere il mio problema.. e sinceramente sono anche riuscita a fare qualche aggiustamento..

adesso pero non riesco a venirne fuori!
ho un sito in cui a un certo punto della pagina ho bisogno di affiancare 3 div
http://intranet.remedia.it//mcdimagrimento/metodo.htm
ecco il link! su explorer le 3 colonne si allargano mentre su firefox rispettano la separazione impostata.
su tutti e due l'ultimo dv invece di stare in linea con gli altri, viene sbattuto sulla riga sotto.
HELP!

ecco il css dei 3 div:

codice:

#faseA{
float:left; 
width:227px; 
margin-left:15px;
height: 180px;
border: solid 1px;
float:left;
padding: 85px 0px 15px 0px;
text-align:left;
background-color:#3366CC;
}
#faseB{
width:227px;
margin: 0 auto;
height: 180px;
border: solid 1px;
padding: 85px 0px 15px 0px;
text-align:left;
background-color:#FFCC66;

}
#faseC{
float:left; 
width:227px; 
margin-right:15px;
height: 180px;
border: solid 1px;
float:right;
padding: 85px 0px 15px 0px;
text-align:left;
background-color:#9966CC;
position:relative;
}

per favore.. aiutatemi.. che e' da stamattina che ci sto dietro...
grazie!!

**ronnin** · 24-01-2008, 17:43

ok........
non so come..........
inspiegabilmente.... CI SONO RIUSCITA!

ecco il codice (funzia cn firefox e explorer) del css

codice:

#faseA{
float:left; 
width:227px; 
margin-left:15px;
height: 180px;
border: solid 1px;
float:left;
padding: 85px 0px 15px 0px;
text-align:left;
background-color:#3366CC;
}
#faseB{
width:227px; 
margin-right:17px;
height: 180px;
border: solid 1px;
float:right;
padding: 85px 0px 15px 0px;
text-align:left;
background-color:#9966CC;

}
#faseC{

width:227px; 
margin-right:30px;
height: 180px;
border: solid 1px;
float:right;
padding: 85px 0px 15px 0px;
text-align:left;
background-color:#FFCCCC;
}

pero' non capisco come mai fase 1 e' la colonna di sx, fase 2 quella di dx e fase 3 quella nel mezzo!!!

**fcaldera** · 24-01-2008, 17:44

1) che doctype stai usando?

2) hai racchiuso quei tre blocchi all'interno di un div? Se sì puoi postare anche il relativo codice html e css ?

**ronnin** · 24-01-2008, 17:52

allora... ho fatto altri 2 aggiustamenti e adesso si vede proprio come voglio io!!!

ecco il css completo dei 3 div affiancati e del contenitore:

codice:

#faseA{
float:left; 
width:240px; 
margin-left:8px;
height: 180px;
float:left;
padding: 85px 0px 15px 0px;
text-align:left;
}
#faseB{
width:240px; 
margin-right:10px;
height: 180px;
float:right;
padding: 85px 0px 15px 0px;
text-align:left;

}
#faseC{

width:240px; 
margin-right:18px;
height: 180px;
float:right;
padding: 85px 0px 15px 0px;
text-align:left;
}
#metodo {
background:url(images/metodo.jpg) no-repeat center top; 
width: 100%;
height:282px;
text-align:left;
margin:0px ;
padding:0px ;
border:0px;
clear:both;
float:left;
}

qui l'html della pagina:

codice:

 <div id="metodo">
     <div id="faseA">

Qui inserisco un testo descrittivo per la Fase1</p></div>
	     <div id="faseB">

Qui inserisco un testo descrittivo per la Fase2</p></div>
		     <div id="faseC">

Qui inserisco un testo descrittivo per la Fase3</p></div>
</div>

ecco il doctype:

<!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">

ola!

ps: in teoria doveva essere

contenitore
fase1 fase2 fase3
contenitore

invece la 2 e 3 sono invertite.........

**salasir** · 24-01-2008, 18:13

Metti float: left; al div "faseB", poi aggiusti i margini ed i posizionamenti

**ronnin** · 24-01-2008, 18:30

eh eh....

mi era sfuggito quel float!!

comunque adesso e' perfettooooooooooooooooooo!!

grazie

Discussione: 3 div affiancati

Strumenti discussione

Ricerca discussione

Visualizza

3 div affiancati HELP

Permessi di invio