Scroll orizzontale

[Big Lebowski]

Ciao a tutti, sto realizzando il mio priomo sito table less e mi sono imbattuto in un problema che proprio non riesco a risolvere, vi spiego: quando visualizzo questa pagina caffekoma.altervista.org
a 1024*768 mi compare una barra di scorrimento orizzontale. Qualcuno sa aiutarmi? Ecco il Css, grazie a tutti quelli che mi risponderanno!

html,body{margin: 0;padding:0}

body{font-family: arial,sans-serif;font-size: 76%; background: url(immagini/sfondo.gif) 100% 100%; background-repeat:no-repeat;background-color:#999966;}

div#container{width: 600px; height:400px; margin-left:15%; margin-top:5%; text-align:left; background: url(immagini/cont.gif) 0% 0%; background-repeat:repeat-y;}

h1,h2{margin: 0;padding:0}

h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}

h2{color: #999;font-size: 1.5em}

p.desc{font-family: arial,sans-serif;font-size: 74%; border:0px; padding:0 em;}

img{border:0px; padding:0 em;}

div#navigation{width: 600px; height:71px; background: url(immagini/top.gif) 0% 0%; background-repeat:no-repeat; padding-left:360px; padding-top:5px; padding-bottom:3px;}

div#content{width: 600px; height:329px;background: url(immagini/main.gif) 0% 0%; background-repeat:no-repeat;}

div#navigation ul{margin: 0;padding: 0; list-style-type: none;}

div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} 

div#navigation a#activelink{color: #033;text-decoration: none}

[Caleb]

come width a #navigation prova a dare 240px

[Big Lebowski]

Esatto! Grande ti ringrazio!
Però ora mi sorge il dubbio di non aver capito bene come funzionano i div. Io pensavo che il mio navigation dovesse essere largo quanto il container(cioè 600 px). In pratica mi immaginavo la struttura a div del sito come l'equivalente di una struttura a tabella con 2 righe ed una colonna. Spero di essermi spiegato
E come mai impostando la larghezza del div navigation a 240px non c'è piu scroll?
Ciao e grazie

[Caleb]

perchè allo stesso div hai dato un padding left di 360px, quindi la larghezza totale era 600px + 360px +15% del margin left

edit: no, niente 15%, quello è nel container... lapsus

[Big Lebowski]

Ok ho capito però mi rimane ancora un dubbio. Con il padding left ho fatto in modo che le immagini del menù si sistemassero a sinistra di 360px rispetto al bordo sinistro del div navigation in modo che non andassero a coprire il logo che è integrato nell'immagine di sfondo. Cosi facendo ho anche variato (in questo caso di 360px) la la lunghezza del div? Perchè mi risulta nuova questa proprietà, nelle tabelle se non ricordo male se imposto un padding left a una cella non ne cambio le dimensioni ma solo la disposizione del testo al suo interno, forse ho detto un sacco di fesserie ma devo ancora prenderci le misure con la struttura table less.
Ciao e grazie per la tua disponibilità

[Caleb]

il box model per i div funziona all'opposto: la larghezza totale è sempre data da border left + padding left + width + padding right + border right

width in questo contesto non è la larghezza totale ma la larghezza del contenuto

questo nei browser che interpretano correttamente il box model, in ie5 e 5.5 la larghezza totale è data da width - padding left - padding right - border left - border right

difatti se guardi la tua pagina con ie5 o 5.5 è totalmente scombinata perchè la larghezza di #navigation diventa 240 - 360 = -90px, che è un valore insensato

in giro per la rete ci sono molti modi per tamponare la cosa, guarda questo link per chiarirti le idee

[Big Lebowski]

Grazie mille, sei stato gentilissimo, a buon rendere!