PDA

View Full Version : [CSS] allineare due div in orizzontale


CioKKoBaMBuZzo
15-03-2011, 11: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 :cry:

vi posto il codice:

SORGENTE PAGINA:

<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:

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, 22:31
<!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>