Ciao,
allora...stò adattando un template per un sito, il template è semplicemente un header, una colonna sinistra (per il menu) ed un blocco di content per il contenuto.

Nel blocco del content ci devo mettere 2 o più righe (attualmente 2 ma non cambia nulla ad aggiungerne altre) divise in 3 colonne, ed ogni "cella" (realizzata con i div) dovrà contenere una fotografia (ed eventualmente una breve descrizione testuale ma vabbè).

Inizialmente avevo realizzato la cosa usando i soli float ma come potete vedere in questa prima versione qualora delle immagini non venissero inserite in una "cella" si verrebbe a creare il problema che il contenuto sottostante gli si dispone accanto.
Ecco quì l'esempio: http://www.siatec.net/andrea/archivi...ate5/version1/

Nelle ultime due celle non ho inserito le immagini e la roba che dovrebbe stare sotto gli si dispone accanto...


Ho pensato allora di racchiudere ogni "riga" in un div facente parte della classe blocco_annunci e di dare a tale classe l'atributo clear: left; nel foglio di stile, così da fare in modo che al contenuto di una riga non possa essere affiancato nulla.

Ecco quì il mio risultato: http://www.siatec.net/andrea/archivi...ate5/version2/

L'idea credo sia buona tranne che ho un problema: praticamente mi si crea uno spazio maggiore tra la scritta nel content e la zona che contiene le fotografie...se aprite se la version1 che la version2 capite al volto...è come se la zona contenente le due "righe" fosse spostata verso il basso...

Non ne capisco il perchè e vorrei evitare questo inconveniente...mi date una mano?

Eccovi i codici della version2:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MODERNA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="banner">
    <h1>Your <span style="color: #000;">Company</span> Name</h1>
  </div>
  
  <div id="sidebar-a">
    <h2>Links</h2>
    <div class="menu">
      <ul>[*]Snapp Happy[*]Andreas Viklund[*]James Koster[*]OSWD[*]CSS play[*]Listamatic[/list]
    </div>
  </div>
 
 

  <div id="content">
    <h2>Welcome to <span style="font-weight:bold; color:#891E18;">Moderna</span> Template</h2>
    
    <blockquote>All images were created by me so feel free to use them if you wish. The page has been 		  				tested in Mozilla and IE6/7. The page validates as XHTML 1.0 Transitional using valid 		                CSS.

      			For more FREE CSS templates visit my website.
    </blockquote>
    
    <div class="blocco_annunci">
        <div class="col3">
          <h1>AGRITURISMO:</h1>
          [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
        <div class="col3center">
          <h1>AGRITURISMO:</h1>
          [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
        <div class="col3">
          <h1>AGRITURISMO:</h1>
          [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
     </div>
    
    <div class="blocco_annunci">
        <div class="col3">
          <h1>AGRITURISMO:</h1>
          [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
        <div class="col3center">
          <h1>AGRITURISMO:</h1>
          [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
        <div class="col3">
          <h1>AGRITURISMO:</h1>
          [img]images/foto/agriturismolacastellina.jpg[/img]
        </div>
    </div>
    
    
    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
  </div>
  <div id="footer"> Homepage | contact | &copy; 2007 Anyone | Design by  www.mitchinson.net | Licensed under a Creative Commons Attribution 3.0 License</div>
</div>
</body>
</html>
codice:
body {
margin : 0;
padding : 0;
font : 73% "lucida sans", tahoma, "Trebuchet MS", arial, verdana, sans-serif;
color : #555;
background : #f7f7f7;
}
#container {
width : 99.5%;
margin-left : auto;
margin-right : auto;
padding : 0;
line-height : 1.5em;
}
#banner {
height : 150px;
padding : 0;
background : #f7f7f7 url(images/image00.jpg) no-repeat;
color : #333;
}
#banner h1 {margin : 0;
padding : 5px;
background : transparent;
color : #fff;
}

.menu ul li {
line-height : 1.8em;
margin : 0 10px 0 0;
padding : 0;
list-style-type : square;
color : #476042;
background : inherit;
}
.menu ul li a {
color : #f17c0b;
background : inherit;
}
.menu ul li a:hover {
color : #7ABA2E;
background : inherit;
}
#content {
padding : 0;
margin-left : 170px;

border-left : 1px dashed #333;

color : #555;
background-color : #f7f7f7;
}
#content p {
margin : 20px;
}
#sidebar-a {
float : left;
width : 140px;
margin-left : 5px;
padding : 0 5px 0 5px;
color : #666;
background : #f7f7f7;
}

#footer {
clear : both;
padding : 5px;
margin : 0;
background : #476042;
color : #f7f7f7;
}

a {
text-decoration : none;
color : #f17c0b;
background : inherit;
}
a:hover {
text-decoration : underline;
color : #aaa;
background : inherit;
}
a img {
border : 0;
}
.border {
padding : 10px;
margin : 10px;
border : 1px solid #476042;
}
.imgleft {
float : left;
border : 1px solid #90b905;
margin : 5px 10px 10px 15px;
padding : 5px;
}
h1 {
margin : 20px;
padding : 5px;
font-size : 150%;
letter-spacing : 3px;
color : #fff;
background : #476042;
}
h2 {
padding-left : 20px;
font-size : 140%;
text-transform : uppercase;
letter-spacing : 10px;
color : #476042;
background : inherit;
}
h3 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #476042;
}
h4 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #f17c0b;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
.clear {
clear : both;
width : 100%;
}
.col3,.col3center {
float: left;
width: 30.5%;
}
.col3center {
margin: 0 3%;
}

.blocco_annunci{
	clear: left;
}
Grazie
Andrea