scroll orizzonatle

[nago]

salve,
ho un problema:
ho un div che deve contenere altri div che dovrebbero scorrere orizzontalmente con uno scroll, ma arrivati al limite della dimensione del div esterno va a capo.
questi sono html e css.potete aiutarmi?


<div id="contenuto">
<div class="foto">[img]img/foto1.jpg[/img]</div>
<div class="foto">[img]img/foto1.jpg[/img]</div>
<div class="foto">[img]img/foto1.jpg[/img]</div>
<div class="foto">[img]img/foto1.jpg[/img]</div>
<div class="foto">[img]img/foto1.jpg[/img]</div>
</div>


div#contenuto{
background:#fff ;
width:758px;
height:334px;
line-height:334px;
border:1px solid #969696;
margin:5px 0px 0px 185px;
float:left;
overflow-x:auto;
overflow-y:none;
overflow: -moz-scrollbars-horizontal;
}


.foto{

height:178px;
margin:16px 0px 4px 24px;
float:left;}

[Mich_]

Ti manca un blocco.

Devi avere un blocco che sta fisso (contenitore) ed uno che scorre, dentro al quale sono tutte le tue foto.

Invece non sono necessari i <div> che contengono esattamente una immagine; puoi applicare il CSS alle immaigni direttamente (dopo averle fatte diventare blocchi).

Quindi:

<div id="contenitore">
  <div id="contenuto">
    [img]img/foto1.jpg[/img]
    [img]img/foto1.jpg[/img]
    [img]img/foto1.jpg[/img]
    [img]img/foto1.jpg[/img]
    [img]img/foto1.jpg[/img]
  </div>
</div>

CSS:

#contenitore {
  width: 758px;
  height: 334px;
  overflow: auto;
  overflow-x: auto;
  overflow-y: none;
  overflow: -moz-scrollbars-horizontal;
}
#contenuto{
  background:#fff ;
  width: 3758px;      /* devono starci tutte le immagini */
  height:332px;
  border:1px solid #969696;
  /* margin:5px 0px 0px 185px; */
}
#contenuto:after {    /* poi serve un hack per IE */
  clear: both;
}
.foto{
  height:178px;
  /* margin:16px 0px 4px 24px; */
  display: block;
  float:left;
}

Ho dei dubbi riguardo ai margini, per cui al momento li ho tolti.
Tieni anche presente che i conti devono essere corretti; il padding e i bordi si comportano inmodo diverso tra i browser standard ed IE.

[nago]

grazie mille!