il div float che finisce sotto... maledizione!

[insurrection]

ciao ragazzi , continuo ad avventurarmi nel meraviglioso mondo dei css!

sto modificando un tema per wordpress
vivisezionando quello di base che c'è nell'installazione
ho voluto creare una struttura che funziona così

un div PAGINA che contiene l'HEADER
poi un div PGGGG che contiene a sinistra il CONTENUTO del blog
a destra un div chiamato ZIDE che a sua volta è diviso con BANNER
e sotto due colonne SIDEBAR (L e R) poi in basso un contenitore d'ALTRO
ed infine il FOOTER
ecco vi ho fatto un disegno di fretta (dove mi accorgo ora che manca lo ZIDE... ma credo abbiate già capito qual'è)


bene il problema è che nonostante abbia dato il float: right a tutto ciò che è a destra (sidebar R ,ZIDE) ad unica esclusione di SIDEBARL perché deve andarmi sulla sinistra di zide....
quando il contenuto cresce di vari articoli lo zide con i banner e tutto finiscono sotto il CONTENUTO (ad articoli brevi invece va tutto bene)

che diamine succede?
perché il float non dura?

un ultima cosa
per far portare i banner nello spazio gli ho dato un img{width: 400px;} ok perfetto!
ma... adesso anche le immagini che compaiono dopo nelle sidebar prendono questa misura
come gli posso dire di non farlo?

[insurrection]

chiaramente ho già letto tutte le guide qui presenti...eppure non raccapezzo!

ho nche inserito i clear:both;

per un attimo ho anche pensato funzionasse !!!
...ma purtroppo, inserendo altri articoli e facendo crescere la pagina in lunghezza
ZIDE finisce sempre sotto

niente da fare! :-(

[Myaku]

1. dove hai inserito il clear?
2. stai floattando anche contenuto e zide, in questo caso usi i float? se sì, lì il clearing c'è?
3. il codice è valido?
4. se verificato tutto questo, hai ancora problemi, postaci un link che almeno vediamo html e css

[insurrection]

intanto ti mostro l'index...
è probabile (...molto) che già qui abbia fatto disordine:

<?php get_header(); ?>
<div id="pggg">
	<div id="content" class="narrowcolumn">

	<?php if (have_posts()) : ?>
		
		<?php while (have_posts()) : the_post(); ?>

			<div class="post" id="post-<?php the_ID(); ?>">
				<h2>"><?php the_title(); ?></h2>
				<?php the_time('j F Y') ?>  <?php edit_post_link('Edit'); ?>
				
				<div class="entry">
					<?php the_content('Continua &raquo;'); ?>
						
				<p class="postmetadata">Pubblicato in <?php the_category(', ') ?> | <?php edit_post_link('Modifica','','|'); ?>  <?php comments_popup_link('Nessun Commento &#187;', '1 Commento &#187;', '% Commenti &#187;'); ?></p>
			</div>
	
		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Articoli Precedenti') ?></div>
			<div class="alignright"><?php previous_posts_link('Articoli Successivi &raquo;') ?></div>
		</div>
		</div>
	<?php else : ?>

		<h2 class="center">Non trovato</h2>
		<p class="center">Spiacente, ma stai cercando qualche cosa che qui non c’&egrave;.</p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

	<?php endif; ?>

	
	</div>
	<div id="zide">
	<div id="sidebarcontent">
	<div id="publi_sidebar">
INVOCAZIONEBANNER



INVOCAZIONEBANNER
</p></div>
<?php get_sidebar(); ?>
</div>
</div>	
	<div id="recente">
  		<div class="RecentPosts">

		     <div class="LatestCom">
<h3>Commenti Recenti</h3>
 <ul>
  <?php mdv_recent_comments('10'); ?>[/list]
</div>

  </div>

  <div class="LastComments">
SCRIPT
  </div>

  <div class="boh">
SCIPT DI GOOGLE
    

</p>
   

</p>
  </div>

</div>

<?php get_footer(); ?>
</div>

p.s. ma c'èqlk software che controlla se ho fatto qulk errore? (è questo che intendi pervalidare?... o intendi w3c?)

[Myaku]

Originariamente inviato da insurrection
p.s. ma c'èqlk software che controlla se ho fatto qulk errore? (è questo che intendi pervalidare?... o intendi w3c?)

la validazione è quella fatta tramite il validatore del w3c

[insurrection]

ecco invece un sunto del css
(compòeto il forum non me lo inserisce):

#page{
	background-color:transparent;
	width:921px;
	margin:0 auto 0 auto;
	color:#ccc;
	}
#pggg{
	background-color:transparent;
	width:920px;
	margin:0 auto 0 auto;
	color:#ccc;
	}
#header{
 	background: url(bkg/rotator.php) repeat-x left top; width: 1000px; position: relative; clear: left;
	padding: 0px; min-height:98px;
	width:100%;
	height:50px;
	margin:0 auto;
	margin-bottom: 5px;
	}

#bannerheader{width:50%;height:70px;float:left;}
#bannerheader img{width: 400px;}

#bannerheader a{}
#header h1{
	color:#fff;
	font-size:1.3em;
	text-transform:uppercase;
	margin:0;padding:5px 0 0 0;
	}
#content{
	clear:none;
	min-height:50%;
	background-color: #000000;
	margin-bottom: 5px;

	}
#content h1{font-size:17px; font-weight: bold; }
#content h1 a:link,
#content h1 a:visited,
#content h1 a:active{color:#8C3245;font-weight: bold;}
#content h1 a:hover{color:#8C3245;font-weight: bold;}
.narrowcolumn{
	float:left;
	width:500px;
	margin:0;
	padding:5px;
	background-color: #000000;
	overflow:auto;
	}
#footer{
	clear: both;
	width:920px;
	height:auto;
	margin:0 auto;
	clear:both;
	margin-top: -10px;
	}
span.footertext{
border-top: 1px dotted #FFFFFF;
width:910px;
height: 20px;
float:left;
margin: 5px;
padding-top: 5px;
}

#content li{
	list-style:square;
	margin-left:10px;
	}
#nav .current_page_item a,
#nav .current_page_item a:visited{
color:#8C3245;
	text-decoration:none;
	background:#000000;
	padding:5px 5px;
	font-size:12px;
	font-family:Verdana,Arial,Helvetica,sans-serif; 
	text-transform:uppercase;
	border:1px solid #FFFFFF;
	border-bottom: none;
	display:block;}
#nav .page_item a{
	color:#ccc;
	text-decoration:none;
	background:#000000;
	padding:5px 5px;
	font-size:11px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	border:1px solid #FFFFFF;
	border-bottom: none;
	/*
	border-bottom:2px solid #333;
	border-left:1px solid #aaa;
	border-right:2px solid #000;*/
	display:block;
	}
#nav .page_item a:hover{color:#8C3245;}
p{font-size:small;color:#ccc;}
h2,h3{
	margin:0;
	padding:0;
	font-size:1.3em;
	color:#8C3245;
	}
h3.comments{
	font-size:1.2em;

	}
.commentform{
	margin:0 0 0 0;
	clear: both;
	display: block;
	width: 100%;}

#footer p{
	text-align:center;
	padding:20px 0 0 10px;
	font-size:10px;
	position:relative;
	}
.pagetitle{
	color:#fff;
	margin:0 0 0 20px;
	}
.cat{
	font-size:.7em;
	line-height:.85em;
	margin:0 0 0 5px;
	padding:0 0 0 5px;
	color:#aaa;
	border-left:3px solid #ddd;
	}
#header h1,#header a,#header a:visited,#header a:hover{color:#fff;text-decoration:none;}
#footer a,#footer a:visited{
	color:#ccc;
	text-decoration:none;
	}
#footer a:hover{
	text-decoration:underline;
	color:#fff;
	}
a:link,a:visited,a:active{color:#999999;text-decoration:none;}
a:hover{color:#FFFFFF;text-decoration:underline;}
h2 a:hover,h3 a:hover,h1 a:hover{text-decoration:none;}
.post h3{
	color:#ddd;
	border-bottom:1px solid #ddd;
	margin:0 0 5px 0;
	}
.post h2 {font-size:11px; text-decoration: underline;color:#FFFFFF;text-transform:uppercase;  }
#zide{
	clear:both;
	float:right;
	width:100%;	
	overflow:auto;
	display:inline;
}
#sidebarcontent{
	float:right;
	width:399px;
	margin-bottom: 5px;
	overflow:auto;
	display:inline;
	
}

.SR { width: 400px; float: right; position: relative; }
.SR h2 { font-size: 14px; letter-spacing: normal; font-weight: bold;}
.SR h3 { font-size: 14px; letter-spacing: normal; font-weight: bold;}

.SRL {  width: 165px; float: left; padding: 15px 20px 15px 20px;background-color: #000000;}
.SRL h3 { background: url(images/SRLH3.gif) repeat-x left bottom; color:#cccccc; padding: 0px 0px 5px 0px; margin: 0px}
.SRL li a { color:#FFF; font-size: 11px; }
.SRL li a:visited { color:#FFF; }
.SRL li a:hover { color:#990001;}

.SRR { width: 170px; float: right; padding: 10px; background-color: #000000;}
.SRR h3 { background: url(images/SRRH3.gif) repeat-x left bottom; color:#cccccc; padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px }
.SRR h2 { background: url(images/SRRH3.gif) repeat-x left bottom; color:#abcee1; padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px }
.SRR ul { padding: 0px; margin: 0px;}
.SRR li { padding: 0px 0px 0px 10px; margin: 0px; list-style-type: none; background: url(images/SRRIco.png) no-repeat left top;}
.SRR li a { color:#DB0028; font-size: 12px; }
.SRR li a:visited { color:#990001; }
.SRR li a:hover { color:#7a8fa4;}

#right_sidebar{
	width:195px;
	float:right;
	background-color: #000000;
	margin:0 0 0 5px;
padding-top:7px;
	font-size: 10px;

	}
#left_sidebar{
	width:195px;
	float:left;
	margin:0 0 0 0;
	padding-top:0;
	background-color: #000000;

	}
#left_sidebar h2,.SR h2 {
	font-size: 14px;
	color:#8C3245;
	background-position:left;
	background-repeat:no-repeat;
	text-transform: uppercase;
	padding:10px 0 0 0;
	}

#sidebarcontent h2 a:link{color:#8C3245;}
/*#left_sidebar ul.bordes{border:1px solid #FFFFFF;}*/
#left_sidebar ul{width: 95%; margin-left:0px; padding-left: 5px;}
#left_sidebar li {font-size:10px;}
#left_sidebar ul img{
	width: 100%;}
#left_sidebar ul.comunidad{
	margin:0;
	}
#left_sidebar ul.comunidad li{margin:0;}
.SR ul,.SR li,.SR ul li{padding:5px 0 0 5px;margin:0;}
#left_sidebar li,#left_sidebar ul li{padding:5px 0 0 0;margin:0;}
.SR li li,#left_sidebar li li{
	font-size:small;}
.SR li li ul li,#left_sidebar li li ul li{margin-left:0;background-position:left;background-repeat:no-repeat;}
.SR ul,
#left_sidebar ul,#middle_sidebar ul{list-style-type:none;}
.SR li,.SR ul select,#left_sidebar li,#left_sidebar ul select{font-size: 10px;margin:0;padding:0;}
.SR ul li img{width: 100%;}
.SR a:link,
#right_sidebar a:visited,
#right_sidebar a:active,
#left_sidebar a:link,
#left_sidebar a:active,
#left_sidebar a:visited{color:#fff;text-decoration:none;}
#right_sidebar a:hover,#left_sidebar a:hover{color:#999;text-decoration:underline;}

#right_sidebar h2 a:link,#right_sidebar h2 a:visited,#left_sidebar h2 a:link,#left_sidebar h2 a:visited{color:#8C3245;text-decoration:none;}
#right_sidebar h2 a:hover,#left_sidebar h2 a:hover{color:#8C3245;text-decoration:none;}
#right_sidebar ul p{font-size: 10px;}
.eventos{border-bottom:1px dotted #e5e5e5;}
.evenos_dats{}
.eventos_datos ul{font-size: 10px;color:#8C3245;}
.eventos_datos ul li{margin-left: 0;color:#8C3245;}
ec3_events{margin: 0;}
a.eventday{color:#8C3245;}
a:hover.eventday{color:#8C3245;text-decoration: underline;}

#sidebar h2 a:link,#sidebar h2 a:visited,#left_sidebar h2 a:link,#left_sidebar h2 a:visited{color:#8C3245;text-decoration:none;}
#sidebar h2 a:hover,#left_sidebar h2 a:hover{color:#8C3245;text-decoration:none;}
#sidebar ul p{font-size: 10px;}
.eventos{border-bottom:1px dotted #e5e5e5;}
.evenos_dats{}
.eventos_datos ul{font-size: 10px;color:#8C3245;}
.eventos_datos ul li{margin-left: 0;color:#8C3245;}
ec3_events{margin: 0;}
a.eventday{color:#8C3245;}
a:hover.eventday{color:#8C3245;text-decoration: underline;}


ul{font-size:small;list-style-type:square;color:#cccccc;}
blockquote{background-image:url(images/quote.gif);background-position:top left;background-repeat:no-repeat;padding:1px 0 0 20px;font-style:italic;min-height:50px;}
blockquote p{color:#fafafa;}
blockquote blockquote{background-image:url(images/sml.gif);background-position:top left;background-repeat:no-repeat;padding:0 0 0 25px;font-style:italic;}
#search input{border:1px solid #4D4D4D;font-size:0.85em;color:#fff;width:80%;padding-left:2px;position:relative;}
a img{border:none;}
small{font-size:10px;} 
.date{font-size:10px;color:#ddd;}
span.alignleft{}.commentlist li{padding:5px 10px 5px 10px;margin:0 0 5px 0;list-style: none;}
.alt{background-color:#4D4D4D;}
#wp-calendar{color:#fff;empty-cells:show;width:95%;font-size:10px; margin-top: 5px;}
#wp-calendar a{display:block;text-decoration:none;}
#wp-calendar #next a{padding-right:10px;text-align:right;}
#wp-calendar #prev a{padding-left:10px;text-align:left;}
#wp-calendar caption{ font-style:inherit; font-size:16px;font-family:Verdana, Helvetica, Arial, sans-serif;text-align:center;}
#wp-calendar td{padding:3px 0;text-align:center;}
table caption{font-weight:bold;font-size:12px;}
.center{text-align: center;}.alignleft{float:left;}
.alignright{float: right;}
/*#content p img{float:left;border:none;margin-right:10px;margin-bottom:10px;}*/
#content p img{border:none;margin-right:10px;margin-bottom:10px;}
.ff a img{border:.08em solid #ccc;padding:.077em;width:3.5em;height:3.5em;margin:0 .077em .077em 0;}
.ff a:hover img{border:.08em solid #333;width:3.5em;height:3.5em;}
.l-col{width:97%;float:left;margin-left:5px;border-top:2px solid #333;}
#comments, #respond{border-bottom:3px solid #333333;padding-bottom:5px;color:#cccccc;}
#comments p{ font-size: 10px;}
.commentlist{margin:10px 0;padding-left:20px;line-height:130%;}
.commentlist li{padding: 5px 10px; list-style: none;}
.commentlist .alt{background:#333;}
.commentlist cite,.commentlist cite a,
.commentlist cite a:visited{font-weight:bold;font-style:normal; font-size: 10px;color:#ccc;}
.commentlist p{ font-size: 10px;}
.commentlist small{margin-bottom:5px;display:block;font-size:87%;}
#commentform{margin-top:10px;font-size:36px; font-family:Verdana, Helvetica, Arial, sans-serif;}
#commentform p{padding:6px 0;margin:0;}
#commentform label{color:#ccc;font-size:87%;}
#commentform input{width:200px;background:#000;border:1px solid #333;padding:3px;margin-top:3px;color:#ccc;}#commentform textarea{width:95%;height:115px;background:#000;border:1px solid #333;padding:2px;margin-top:3px;color:#fff;}
#commentform #submit{border:1px solid #FFFFFF; font-size:12px;font-family:Verdana, Helvetica, Arial, sans-serif;color:#ccc;float:right;width:144px;height:28px;cursor:pointer;}
#commentform textarea:focus, #commentform input[type="text"]:focus{background:#000;}
#publi{
width:100%;
display:block;
float:left;
margin-top: 5px;
margin-bottom: 5px;
height: auto;}
#publi_sidebar img{width: 400px;} 
#publi_sidebar{
display:block;
float:right;
margin-bottom: 5px;
}

#recente{
clear:both;
display:block;
background-color:#000000;
width: 910px;
padding:5px;
margin-bottom: 5px;
margin-top: 5px;
height:150px;
clear:both;
}
#recente li{font-size: 10px;}
.RecentPosts{
width:292px;
float:left;
margin-right: 10px;
}
.LastComments{
border-left:1px dotted #FFFFFF;
border-right:1px dotted #FFFFFF;
width:290px;
float:left;
margin-right:10px;
}
.MostCommented{
width:292px;
float:left;
}
.searchheader{
width: 920px;
margin:-80px auto;
z-index:200;
position: absolute;
}
.searchheader input{float:right;margin-right:10px;}
.searchform input{
border: 1px solid #e5e5e5;
}
#publi_top{width:920px;display: block;margin:0 auto;
height:70px;visibility: hidden;}

#publi_top img{width: 50%; float:left;}
#publi_top img.top1{width: 50%; float:left;}
#publi_top img.top2{width: 50%; float:right;}
#publi_sidebar_destacado{margin-left:5px; margin-bottom: 5px;}
#publi_sidebar{}
#publi{margin-top:5px; margin-bottom:5px;}
#publi img{width: 100%;}
#recomendados{width: 190px;display:block; margin:5px;height: auto;margin-bottom:-30px;}
#recomendados h2{font-size:1.3em;}
#recomendados img{display:block;width:100%; height:auto;}
span.itemtitle{text-transform: uppercase;text-decoration: underline;font-size: 12px;margin-top: 10px;}
#recomendados span.itemcontent p{font-size:10px;text-align: justify;}
#recomendados span.itemcontent p+p{display:none;}
#recomendados span.itemcontent p img{display:block;}
#fotos{display: block; width:100%;}

li.rss_entradas{background: url('images/rss_entradas.jpg') no-repeat;margin-top:10px;text-indent: 32px;height: 28px;}
li.rss_comentarios{background: url('images/rss_comments.jpg') no-repeat;text-indent: 32px;height: 28px;}

[insurrection]

lì per lì ho festeggiato!
sono riuscito a riportare su lo zide
poi però appena aggiunto altri articoli di prova
è subito tornato sotto... argh!

il clear:both; dovrebbe andare su #recente (quello che nel grafico si chiama altro)?

il div degli articoli vedo che mi finisce sempre per andare sopra a recente e footer...
mannaggia...nessuno mi può aiutare?
sono due gg che ci sto sopra e sto impazzendo!

[Myaku]

Originariamente inviato da insurrection

il clear:both; dovrebbe andare su #recente (quello che nel grafico si chiama altro)?

uno si. per riportare nel flusso del documento "contenuto" e "zide"

per le sidebar all'interno di "zide", se anche lì ci sono float ti consiglierei di inserirci un clear su un elemento interno a zide, che segue i banner (e togliere quindi il clear da zide, che ha già un float - magari dice poco, ma io di solito non metto mai un clear a un elemento che ha già un float)

Cyà

[insurrection]

alla fine questa notte ci sono riuscito
...che smattimento però
tentativi su tentativi han fatto il loro effetto!

bhè , i problemi principali erano dei div che s'incastravano male con quelli già presenti in wordpress.... poi ho ordinato il clear come hai detto tu
ed ora fila tutto lisio!!!

passo ora alla formattazione del testo ;-)

grazie e buone feste!