Problema footer spostato

[Valeria75_bis]

Secondo voi perchè questo footer mi risulta spostato .... con il margin-left degli oggetti sopra??

<div id="main"> 
    
<div id="menu">


Menu


</div>    

<div id="content">

<div id="bar_s"><div id="bar_e"><div id="bar_n">

</div>




<div id="footer">

Footer

</div> 

#main
{
    margin: auto;
    width: 980px;
    height: 600px;
}


#content
{
    width: 980px;
}


#bar_s
{
    margin-left: 0px;
    margin-top: 8px;
    width: 516px;
    height: 60px;
}

#bar_e
{
    margin-left: 518px;
    margin-top: 8px;
    width: 229px;
    height: 58px;
}

#bar_n
{
    margin-left: 231px;
    margin-top: 8px;    
    width: 229px;
    height: 58px;
}


#footer
{
    margin-left: 0px;
    width: 980px;
    background: #ffffff;
} 

[Valeria75_bis]

Giocando con questi div ho notato che per qualche motivo che ignoro... a volte un div che dovrebbe iniziare nel margine sinistro del "content" risulta spostato verso destra....


per quale motivo tutti i miei div che contengono i "bar..." (immagine) non risultano allineati a SX ma sempre piu spostati a DX?


io vorrei che nel content ci fosse le 3 immagini di bar_s, bar_e, bar_n allineate ... invece sono leggermente spostati a destra

e anche nel footer down1, down2, down3 allineati a sinistra, mentre risultano ancora piu spostati a destra rispetto ai bar sopra

cosa sbaglio?

<div id="wrap" align="center"> 
<div id="main"> 
    
<div id="menu">


Menu


</div>    

<div id="banner" align="center">
[img]images/30anni.png[/img]
</div>

<div id="content">

<div id="bar_s"><div id="bar_e"><div id="bar_n">


</div>





<div id="footer">

<div id="bar_down_1"><div id="bar_down_2"><div id="bar_down_3">

</div>


</div>
</div> 

body
{
    margin: 0;    
    background: #ffffff url(images/top.png) repeat-x 0 0 ;
}


#wrap
{
    width: 100%;    
    height: 100%;
    background: transparent url(images/down.png) repeat-x bottom ;
}

#main
{
    width: 980px;    
    height: 100%;
}

#main p
{
    padding: 10px;
}

#menu
{
    margin-top: 150px;
    width: 100%;
    background: #ffffff;
}

#banner
{
    margin-top: 8px;
    width: 980px;
}

#content
{
    margin-left: 0px;
    width: 980px;
}


#bar_s
{
    background: #ffffff;
    margin-left: 0px;
    margin-top: 8px;
    width: 516px;
    height: 60px;
    background-image: url(images/bar_s.png);
}

#bar_e
{
    margin-left: 518px;
    margin-top: 8px;
    width: 229px;
    height: 58px;
    background-image: url(images/bar_e.png);
}

#bar_n
{
    margin-left: 231px;
    margin-top: 8px;    
    width: 229px;
    height: 58px;
    background-image: url(images/bar_e.png);
}


#footer
{
    margin-left: -1420px;
    width: 980px;
}


#bar_down_1
{
    margin-left: 0px;
    margin-top: 8px;    
    width: 334px;
    height: 70px;
    background-image: url(images/bar_down.png);
}

#bar_down_2
{
    margin-left: 335px;
    margin-top: 8px;    
    width: 334px;
    height: 70px;
    background-image: url(images/bar_down.png);
}


#bar_down_3
{
    margin-left: 335px;
    margin-top: 8px;    
    width: 334px;
    height: 70px;
    background-image: url(images/bar_down.png);
} 

[Valeria75_bis]

Nessun aiutino??

[Mich_]

Hai tutta una serie di blocchi innestati, ciascuno dei quali ha un certo margin-left: e` chiaro che quello piu` interno sente tutti i margini di tutti gli elementi che lo contengono.

Ma forse quello che vuoi fare e` affiancare una serie di elementi: in tal caso hai sbagliato approccio: ti conviene usare i float; e comunque i vari elementi da affiancare devono essere figli di uno stesso padre:

HTML:
<div id="content">
  <div id="bar_s"> ... </div>
  <div id="bar_e"> ... </div>
  <div id="bar_n"> ... </div>
</div> 


CSS:
#content {
  widh: ...;
  ...
}
#content div {
  float: left;
}
#content:after {
  clear: left;
  ecc. Vedi la pillola di fcaldera su clearing
}
#bar_s {
  width: ...;
}
ecc

[Valeria75_bis]

Grazie mille, alla fine sono riuscita utilizzando una struttura padre/figlio..... perchè in questo caso devo utilizzare "float"?? quando risulta necessaria questa strada?

Grazie

[Mich_]

"necessario" e` una parola grossa.

Direi piuttosto "conveniente".
Se si puo` non usare il posizionamento la cosa diventa molto piu` semplice.