problemi con div css e width

[LA VALE]

la pagina è questa: http://lv4er.altervista.org/nuovoindex.htm

il codice html questo:

<div id="main">

<div id="logo">

[img]images/logo.gif[/img]

</div>

<div id="header">


<script language=javascript type="TEXT/JAVASCRIPT">
<!-- 
document.write("<font face='verdana' color='#000000' size=1>" + dayName[now.getDay()]  + ", "+ now.getDate()+" " + monName[now.getMonth()]  + "</font>")
        //  -->
</script>



||

<script language='JavaScript' SRC='http://codice.html.it/utenti_in_linea.asp?IDSito=29879'></script> visitatore ||



<a style="cursor:hand" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.lv4er.cjb.net')" href>[img]images/home2.gif[/img]</a>


 
[img]images/preferiti2.gif[/img]



[img]images/littlearrow2.gif[/img]



[img]images/mail.gif[/img]

</div>

<div id="subheader">

prova

</div>

</div>

il css è questo:

body {
	background : #ffffff;
	color : #000000;
	font : 10px Verdana;
	margin : 0px;
	padding-bottom : 0px;
	padding-left : 0px;
	padding-right : 0px;
	padding-top : 0px;
	text-align : center;
	scrollbar-face-color: #000000;  
	scrollbar-shadow-color: #000000; 
	scrollbar-highlight-color: #000000; 
	scrollbar-3dlight-color: #ffffff;  
	scrollbar-darkshadow-color: #000000;  
	scrollbar-track-color: #ffffff;  
	scrollbar-arrow-color: #ffffff; 
}
#main {
	background: #ffffff;
	border-bottom : 1px solid #000000;
	border-left : 1px solid #000000;
	border-right : 1px solid #000000;
	border-top : 1px solid #000000;
	color : #000000;
	margin : 20px auto;
	text-align : left;
	width : 580px;
}
#logo {
	background : #336699;
	border-bottom : 1px solid #000000;
	height : 109px;
	width: 580px;
	margin : 0px;
	padding-bottom : 0px;
	padding-left : 20px;
	padding-right : 20px;
	padding-top : 0px;	
}
#header {
	border-bottom : 0px;
	border-left : #000000 1px solid;
	border-right : #000000 1px solid;
	border-top : 0px;
	margin : 0px 25px;
	padding-bottom : 5px;
	padding-left : 2px;
	padding-right : 2px;
	padding-top : 5px;
	width : 560px;
	background : #ffcc00;
}
#header a {
	color : #000000;
}
#subheader {
	background: #ff0000;
	border-bottom : #000000 1px solid;
	border-top : #000000 1px solid;
	margin: 0px;
	width: 600px;
	height: 13px;
	padding-bottom : 1px;
	padding-left : 2px;
	padding-right : 2px;
	padding-top : 1px;
	text-align: center;
}
#subheader a {
	color: #ffff00;
}

ora quello ke si nota, è il fatto ke le dimensioni impostate nei vari ID del css non tornano...
nn tornano per il fatto ke la pagina nn funziona, cioè:

il div in alto con lo sfondo blu e il logo è largo 580px;
al div inferiore (giallo) ho impostato un margin destro e sinistro d 25px, ma se imposto la larghezza del div a 530 (580-50), il div risulta molto corto: per questo ho dovuto metterlo a 560px, ma come vedete, non torna;
il div rosso poi, (ke deve essere largo come quello blu, cioè 580) se lo imposto con margini zero e width: 580, diventa ancora più corto di quello giallo....
nn capisco proprio come mai...

AIUTO!!!

[cantard]

Ehi, ciao!

Mi consola, non sono l'unico... da settimane sbatto la testa su questi problemi...

Allora: non sto a vedere il css, ma provo qualche annotazione...

con i.e. c'è il problema che dici tu (i vari layer, logo, header e sub-header non finiscono insieme). Forse potresti provare con display:block; .

con NS7 lo sfondo del div main spande sopra e sotto gli altri layer di ca. 2px.

con opera6 tutto il blocco main è attaccato in cima, non c'è margine dal bordo superiore della pagina e c'è anche lo stesso problema di NS7

Sia con opera che NS non si vede il bordo in basso a dx del layer main, cioè l'angolo è aperto.

Spero che ciò ti sia di aiuto..