non mi funziona display:inline ?

[lordalbert]

Ciao. Io ho un div, al cui interno ci sono altri 2 div che devono stare affiancati. Però li visualizzo uno sotto e l'altro sopra:

Il codice css è:

div.gallery_page {
	border: thin solid #fe0192;
	width: auto;
	height: auto;
	position: absolute;
	top: 200px;
	left: 250px;
	width: 600px;
	height: 600PX;
	padding-right: 80px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 16pt;
	color: #A8A8A8;
	
}

div.album_gallery {
	border: thin solid #ffffff;
	width: 185px;
	height: 250px;
}

img.gallery_menu {
	display: inline;
	border: none;
	margin: 20px;
}

mentre l'html:

<div class="gallery_page">

<div class="album_gallery">
[img]path/image.jpg[/img]

<center>Matrimonio 

Ilaria&Loris
</center>
</div>

<div class="album_gallery">
[img]path/image2.jpg[/img]

<center>Matrimonio 

Serena&Francesco
</center>
</div>

</div>

In questo modo, risulta così


e non è come lo vorrei, cioè allineati. Allora provo a modificare il css, per la precisione modifico div.album_gallery:

div.album_gallery {
	border: thin solid #ffffff;
	width: 185px;
	height: 250px;
	display: inline;
}

però mi esce una cosa strana, cioè:




E' da un'ora che sto litigando con 'sto coso, magari il problema è un errore banale che non riesco a trovare. Qualcuno saprebbe dirmi dove sbaglio?

grazie!

[sandrone65]

Non ti conviene utilizzare il display:inline in questo caso, utilizza il float.

	div.gallery_page {
	border: thin solid #fe0192;
	width: auto;
	height: auto;
	position: absolute;
	top: 200px;
	left: 250px;
	width: 600px;
	height: 600PX;
	padding-right: 80px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 600;
	font-size: 16pt;
	color: #A8A8A8;}

div.album_gallery {
	border: thin solid #ffffff;
	width: 185px;
	height: 250px;
    float:left;}

img.gallery_menu {
	/*display: inline;*/
	border: none;
	margin: 20px;
}

Ricordati di aggiungere un div clear dopo i due div float per evitare problemi con gli elementi successivi

<div class="gallery_page">

<div class="album_gallery">
[img]path/image.jpg[/img]

<center>Matrimonio 

Ilaria&Loris
</center>
</div>

<div class="album_gallery">
[img]path/image2.jpg[/img]

<center>Matrimonio 

Serena&Francesco
</center>
</div>
<div style="clear: left;"></div>
</div>

[lordalbert]

ok grazie, poi provo

[lordalbert]

funziona! Unica "pecca", dopo 3 elementi allineati, il quarto lo manda a capo, nonostante ci sia abbastanza spazio per continuare ad allinearlo.. per ora l'ho risistemato usando position:relative e impostando a mano le coordinate, però è una soluzione un po' sporca.

[sandrone65]

Se va a capo sicuramente ciò è dovuto alla maggiore width della somma degli elementi float rispetto alla width del contenitore, per cui il quarto non c'entra e finisce a capo.
Controlla i margini degli elementi float, eventualmente impostali a zero, stessa cosa per l'eventuale padding del contenitore