[CSS] allineare due div in orizzontale

CioKKoBaMBuZzo · 15-03-2011, 12:57

ciao ragazzi, so che l'argomento è stato già trattato e bistrattato, ma giuro che non riesco a fare questa cosa..ho seguito qualunque tipo di istruzione trovassi nei vari forum ma non c'è modo che il browser mi faccia vedere due div allineati orizzontalmente, me li continua a mettere in verticale (firefox, chrome, ie)

la cosa strana (o magari non è strana, non so) è che dreamweaver me li visualizza in orizzontale correttamente

vi posto il codice:

SORGENTE PAGINA:

Codice:

<body>
<h1>ONE LIFE LEFT</h1>
<div id="container">
   <div class="1">
      <img src="index_gruppo_1.jpg" width="400" height="354" />
      <p>IL GRUPPO</p>
   </div>
   <div class="2">
      <img src="index_disco_1.jpg" width="400" height="354" />
      <p>LO SCORPIONE<br />
      E LA LIBELLULA</p>
   </div>
</div>
</body>

FOGLIO DI STILE:

Codice:

div#container {
	text-align: center;
	width: 100%;
	color:white;
	font-family:"helvetica";
	font-size:36px;
}
div.1 {
	float:left;
	text-align: center;
	width: 400px;
	height: 500px;
}
div.2 {
	float:left;
	text-align: center;
	width: 400px;
	height: 500px;
}

ho provato di tutto, ma la cosa rimane identica..uno sopra e uno sotto..

aiuto

bobbytre · 15-03-2011, 23:31

Codice PHP:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">



<html>

    <head>

        <title></title>

        <style type="text/css">

        #container {

    text-align: center;

    width: 100%;

    color:white;

    font-family:"helvetica";

    font-size:36px;

}

.a1 {

    /*border:1px solid blue;*/

    float:left;

    text-align: center;

    width: 400px;

    height: 500px;

}

.a2 {

    /*border:1px solid red;*/

    float:left;

    text-align: center;

    width: 400px;

    height: 500px;

}

</style>

    </head>



<body>

<h1>ONE LIFE LEFT</h1>

<div id="container">

   <div class="a1">

      <img src="index_gruppo_1.jpg" width="400" height="354" />

      <p>IL GRUPPO</p>

   </div>

   <div class="a2">

      <img src="index_disco_1.jpg" width="400" height="354" />

      <p>LO SCORPIONE<br />

      E LA LIBELLULA</p>

   </div>

</div>

</body>



</html>

15-03-2011, 12:57	#1
CioKKoBaMBuZzo Member Iscritto dal: Oct 2003 Città: Vermezzo - Fiorenza Messaggi: 208	[CSS] allineare due div in orizzontale ciao ragazzi, so che l'argomento è stato già trattato e bistrattato, ma giuro che non riesco a fare questa cosa..ho seguito qualunque tipo di istruzione trovassi nei vari forum ma non c'è modo che il browser mi faccia vedere due div allineati orizzontalmente, me li continua a mettere in verticale (firefox, chrome, ie) la cosa strana (o magari non è strana, non so) è che dreamweaver me li visualizza in orizzontale correttamente vi posto il codice: SORGENTE PAGINA: Codice: <body> <h1>ONE LIFE LEFT</h1> <div id="container"> <div class="1"> <img src="index_gruppo_1.jpg" width="400" height="354" /> <p>IL GRUPPO</p> </div> <div class="2"> <img src="index_disco_1.jpg" width="400" height="354" /> <p>LO SCORPIONE<br /> E LA LIBELLULA</p> </div> </div> </body> FOGLIO DI STILE: Codice: div#container { text-align: center; width: 100%; color:white; font-family:"helvetica"; font-size:36px; } div.1 { float:left; text-align: center; width: 400px; height: 500px; } div.2 { float:left; text-align: center; width: 400px; height: 500px; } ho provato di tutto, ma la cosa rimane identica..uno sopra e uno sotto.. aiuto __________________ La conservazione della quantità di moto non è garantita nei parcheggi incustoditi Un corpo che viaggia di moto rettilineo uniforme nel vuoto assoluto, dopo un paio d'ore comincia a scassars u'cazz

15-03-2011, 23:31	#2
bobbytre Senior Member Iscritto dal: Feb 2010 Messaggi: 466	Codice PHP: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"> <html> <head> <title></title> <style type="text/css"> #container { text-align: center; width: 100%; color:white; font-family:"helvetica"; font-size:36px; } .a1 { /border:1px solid blue;/ float:left; text-align: center; width: 400px; height: 500px; } .a2 { /border:1px solid red;/ float:left; text-align: center; width: 400px; height: 500px; } </style> </head> <body> <h1>ONE LIFE LEFT</h1> <div id="container"> <div class="a1"> <img src="index_gruppo_1.jpg" width="400" height="354" /> <p>IL GRUPPO</p> </div> <div class="a2"> <img src="index_disco_1.jpg" width="400" height="354" /> <p>LO SCORPIONE<br /> E LA LIBELLULA</p> </div> </div> </body> </html> __________________ I robot hanno scintillanti fondoschiena metallici che non dovrebbero essere baciati.

Strumenti
Mostra una versione stampabile Invia questa pagina per email