Allineamento DIV orizzontale problematico

[otta88sun]

Salve,
sul seguente sito www.wepavia.com sto cercando di impostare 2 div affiancati un all'altro nell home.
Ho settato ai relativi div con classe .loop le seguenti proprieta

float:left;

e una larghezza tale da consentire a loro di starci dentro perfettamente.
Il problema è si visualizzano in cascata e non affiancati 2 per 2.
Ho provato a usare anche le proprietà display: inline, display: block, nessun risultato.
Ho anche provato ad ogni 2 articoli di aggiunere un div con stile clear:both, ma non cambia niente.

Avete qualche idea?

Grazie

[deleted_129]

Credo sia necessario l'intero codice. E possiamo risponderti molto velocemente.

[otta88sun]

va bene

.loop{ 	width: 350px; 	height: 300px; 	//display:block; 	float:left; } .loop img{ 	width: 100px; 	height: 100px; } .sticky.loop{ 	width: 100%; } .sticky.loop img{ 	width: 150px; 	height: 150px; }

sticky sta ad indicare l'articolo di primo piano che come tale deve invece essere il doppio degli altri e piu grande.

per il codice sorgente potete prenderlo direttamente da www.wepavia.com.

[deleted_129]

Non capisco quali DIV devi affiancare. Nel sito http://wepavia.com/ sembra tutto ok, cosa vuoi cambiare esattamente? cosa vuoi affiancare a cosa?

[otta88sun]

Salve
vorrei affiancare la notizie sotto a quelle principali, due per ogni riga, se noti infatti vi è uno spazio di 350px che consente perfettamente alla notizia di affiancarsi, ma non funziona

[otta88sun]

per esempio la notizia del bambino aggredito dal rotweiler, dovrebbe stare a destra (e non sotto) a quella dell'anziana che ha subito la violenza.

[deleted_129]

Il codice sorgente dalla pagina è un casino xD poi ti prego di postare qui il pezzo di codice interessato (html e css) della pagina ( bastano le due div degli articoli)...
In generale:

html:

<div id='principale'>
      <div id='articolo1' class='articolo'>Questo è il primo articolo che noi postiamo e come vedi è tutto ok.</div>
      <div id='articolo2' class='articolo'>Questo è il secondo articolo postato che va esattamente accanto.</div>
	  <div id='articolo3'  class='articolo'>Questo è l'articolo sotto, va sotto perchè non entra nel contenitore principale.</div>
</div>

css:

#principale{
width:620px;
}
.articolo{
float:left;
margin:5px;
width:300px;
}

Come vedi ( se lo testi in una pagina vuota) questo funziona alla perfezione, prova ad adattarlo al tuo caso. Meglio di così non posso fare non vedendo il tuo codice html e css.

[otta88sun]

Dunque, ecco il codice interessato, nel frattempo ti anticipo che il "contenitore" che contiene gli articoli si chiama #content mentre ogni articolo appartiene alla classe .loop

Dunque questo riguarda i primi 3 post delle pagine (inclusa la notiza principale che è in alto e deve stare in alto e occupare tutto lo spario).

<div class="post-186 post type-post status-publish format-standard sticky hentry category-guerra category-internet-luogo category-omicidio tag-guerra tag-internet tag-omicidio loop" id="post-186"> 	 				         			                					<div class="entry-title"> 						<h2>Soldati italiani, rivelazione schock: «I nemici li umiliavamo e poi li ammazzavamo»</h2> 					</div>									 					 						 							<div class="entry-meta"> 					

4 aprile 2013 | Modifica</p> 				</div>					 				 				<div class="entry-content"> 		 										<p style="text-align: justify;">INTERNET. Rivelazioni shock da parte di due soldati/ex soldati italiani nei commenti facebook di un blog. Hanno forse ammesso pubblicamente di avere violato le convenzioni internazionali. <a href="http://wepavia.com/soldati-italiani-rivelazione-schock-i-nemici-li-umiliavamo-e-poi-li-ammazzavamo/#more-186" class="more-link">
leggi tutto »</a></p> 						 																	 		</div>		 	</div>		 						 	<div class="post-330 post type-post status-publish format-standard hentry category-ambiente category-pavia category-politica category-tecnologia tag-ambiente tag-comune-di-pavia tag-ecologia tag-energia-solare tag-energie-alternative tag-pavia tag-politica tag-rifiuti tag-sandro-bruni tag-tecnologia loop" id="post-330"> 	 				         			                					<div class="entry-title"> 						<h2>Sandro Bruni, energia e tutela dell’ambiente</h2> 					</div>									 					 						 							<div class="entry-meta"> 					

10 aprile 2013 | Modifica</p> 				</div>					 				 				<div class="entry-content"> 		 										<p style="text-align: justify;">Wepavia.com intervista Sandro Bruni (Ex Sindaco e Consigliere Comunale, Ex Assessore e Consigliere Regionale) in merito alle tematiche di energia e di tutela dell’ambiente. <a href="http://wepavia.com/sandro-bruni-energia-e-tutela-dellambiente/#more-330" class="more-link">
leggi tutto »</a></p> 						 																	 		</div>		 	</div>		 						 	<div class="post-320 post type-post status-publish format-standard hentry category-inverno category-sicurezza category-violenza tag-anziana tag-inverno tag-sicurezza tag-stupro tag-violenza loop" id="post-320"> 	 				         			                					<div class="entry-title"> 						<h2>23enne arrestato dopo 2 mesi per violenza su un’anziana</h2> 					</div>									 					 						 							<div class="entry-meta"> 					

9 aprile 2013 | Modifica</p> 				</div>					 				 				<div class="entry-content"> 		 										<p style="text-align: justify;">INVERNO. Due mesi fa aveva rapinato e violentato  un anziana donna, una sua vicina di casa di 79 anni, questa notte è stato arrestato. La donna aveva riconosciuto il giovane, un 23 enne, e lo aveva denunciato ai carabinieri. <a href="http://wepavia.com/23enne-arrestato-dopo-2-mesi-per-violenza-su-unanziana/#more-320" class="more-link">
leggi tutto »</a></p> 						 																	 		</div>		 	</div>

mentre il css che riguarda questi contenuti è

.loop{ 	margin: 0; 	margin-bottom: 10px; 	padding: 0; 	width: 350px; 	//height: 300px; 	//display:block; 	float:left; } .loop img{ 	width: 100px; 	height: 100px; } .sticky.loop{ 	width: 100%; } .sticky.loop img{ 	width: 150px; 	height: 150px; }

sono un po nei casini, non capisco prorpio dove sto sbagliando e domani devo anche presentare il progetto in comune

[deleted_129]

Il problema non è questo pezzo di codice, deve essere la grandezza del contenitore 'padre' . Hai messo una grandezza sufficiente? (devi contare anche i padding e i marigini) ..Come puoi notare, se copi i codici qui postati da te in una pagina, funziona tutto alla grande xD

[otta88sun]

il contenitore padre si chiama #content per gli articoli, a me sembra che nonostatne padding e margin ci stiano, ora provo a fare il width degli articoli a tipo 50px...