posizionamento vari DIV

[X_Ch4n]

Buongiorno
stamattina ho un problema che mi sta facendo impazzire.

Ho un div, chiamiamolo wrapper x semplicita', con all'interno altri 2 div di dimensioni diverse e affiancati; il primo e' uno slideshow di immagini, il secondo un menu.
Adesso devo inserire all'interno del primo div un piccolo riquadro con un paragrafo

</p>. Ho pensato bene di inserire il paragrafo all'interno di un div, e questo div deve essere allineato con l'angolo in alto a destra del div entro cui e' contenuto. Fino alla prima parte (i 2 div affiancati) tutto ok, ma all'inserimento del div col paragrafo, con safari e firefox va bene, indovinate quale browser va a p...ne?!

Per rendere meglio l'idea di cosa ho fatto vi posto il codice e qualche immagine:

HTML:

			
<div class="down">
	<div class="slideshow">
		[img]image.png[/img]
		<div class="payoff">
			

testo </p>
		</div>
	</div>
	<div id="second_menu">
		<ul class="menu">
			[*]item1[/list]
	</div>

CSS:

	.down { margin-left:15px; margin-top:10px; float:left; }	
		.slideshow {
			max-width:970px;
			display:inline;
			float:left;
			margin-top:0px;
			padding:0;
			margin-bottom:0;
			/*position:relative;
			z-index:-1;*/
		}
		.slideshow .payoff{
			width:455px;
			height:40px;
			position:relative;
			float:right;
			margin-top:-40px;
			margin-right:0px;
			z-index:100;
			padding:0;
			font-style:italic;
			font-size:20px;
			background:url(../images/bkg-nivo-desc.png) repeat;
		}
		.slideshow .payoff p {
			width:100%;
			margin-top:10px;
			text-align:center;
			color:#fff;
		}
		
		#second_menu {
			width:200px;
			height:230px;
			float:left;
			margin-top:0px;
			/*position:relative;*/
			/*z-index:-1;*/
			background:url(../images/bkg-second-menu.png) repeat;
		}
		#second_menu ul.menu {
			list-style-type:none;
			padding:0;
			margin-top:0;
			margin-left:0px;
		}
		#second_menu ul.menu li {
			width:183px;
			height:20px;
			margin:0;
			padding:4px 0;
			padding-left:15px;

			border-color:#333;
			border-style:solid;
			border-left-width:1px;
			border-right-width:1px;
			border-top-width:0px;
			border-bottom-width:1px;
		}

La prima immagine e' come vorrei che sia (e come safari e firefox la mostrano):


La seconda invece e' la visualizzazione exploder style:


Cosa sto sbagliando?

[ResianTaxidrive]

La butto li, quel display:inline di slideshow mi convince poco.

[X_Ch4n]

Originariamente inviato da ResianTaxidrive
La butto li, quel display:inline di slideshow mi convince poco.

Lo so, e' stato un disperato tentativo....

[ResianTaxidrive]

mah, quel margin-top negativo porta comunque il div fuori dal suo contenitore. Se si mette margin-top:0 a me sembra che vada nella posizione da te desiderata anche con explorer.
Comunque se tu dici che va in basso , credo che ci debba essere un altro problema, non c'è motivo che explorer visualizzi il tutto così. Hai un link alla pagina in questione?

[X_Ch4n]

purtroppo no, il sito e' ancora sul server di test che per ovvii motivi non e' pubblico.

[dany_92]

è ovvio!!

Togli .slideshow, devi lasciare solo .payoff { .... }