Lacune su CSS e HTML

Salve a tutti.
Posto qui per chidere di chiarirmi alcuna mie lacune sulla conoscenza degli HTML.
per il mio sito ho utilizzato un layout a tre colonne con background preso dal tutorila di HTML.it.
Ora mi porgo due domande:
Come faccio a ridurre la larghezza delle colonne laterali?
Questo è il odice:

/*stili per il layout fisso con background*/
html,body{margin: 1;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align:center}
div#container{width:900px; margin:0 auto;
        border-width: 0 1px; border-style:solid; border-color: #ccc;
        background: url(3rightcol.jpg) repeat-y top right}
div#container2{background: url(3leftcol.jpg) repeat-y top left;text-align: left}

/*stili generici, su header e footer*/
div#header{height: 80px;background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:10px;font: bold 2.3em/80px arial,sans-serif}
h2{color: #69f;font-size: 1.5em}
div#footer a{color:#fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{float: left;width: 160px;\width:170px;w\idth:160px;padding: 1em 0 0 10px}
div#extra{float: right; width: 160px;\width:170px;w\idth:160px;padding: 1em 5px}
div#content{margin: 0 170px;padding: 1em 10px}
div#footer{clear:both; text-align:center; padding: 5px 0;
    background-color: #69c; color: #000}

/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none}
div#navigation li{margin: 0;padding: 0}
div#navigation a{color:#369;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #033;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
div#navigation p{font-size: 90%}

/*stili per la sezione extra*/
div#extra div.newsbox{font-size: 90%;margin-bottom: 2em}
div#extra div.newsbox h2{color: #999;font-size: 1.2em}
div#extra div.newsbox p{margin: 0}

div#content{
    /* ... */
border-width: 0 1px; 
border-style:solid;
border-color: #ccc;
    }

Seconda domanda:
io sul mio forum finora ho 20 pagine. Per crearle ho copiato il codice dell'index e l'ho incollato cambiando solamante il contenuto.
Se un giorno io deciderò di aggiungere una voce al mio menù laterale, dovrò cambiarlo pagina per pagina?
Spero di essere stao chiaro.

[dementialsite]

...
Come faccio a ridurre la larghezza delle colonne laterali?

Devi modificare lo stile width che è riportato sul CSS, inserendo, ovviamente, dei valori più piccoli.

...
Seconda domanda:
io sul mio forum finora ho 20 pagine. Per crearle ho copiato il codice dell'index e l'ho incollato cambiando solamante il contenuto.
Se un giorno io deciderò di aggiungere una voce al mio menù laterale, dovrò cambiarlo pagina per pagina?

Teoricamente il forum dovrebbe avere già una struttura "modulare": dovrebbe cioè esserci già un file contenente del codice HTML "parziale" corrispondente, nel tuo caso, al menu laterale. Ti basterà quindi modificare quello e la modifica sarà riportata su tutte le pagine.

Se così non fosse, procedi così:
- creati un file nel qualche inserisci SOLO il codice HTML "comune" del menu (non aggiungere intestazioni, tag HEAD o quant'altro)
- modifica le pagine del tuo forum, rinominandole con estensione .php se non l'hai già fatto, togliendo il codice del menu e inserendovi al suo posto questa direttiva:

<?php include "menu.htm"; ?>

dove menu.htm è il file che hai creato sopra
In questo modo, se creerai altre pagine, ti basta aggiungere la stessa direttiva e modificarle tutte solamente cambiando il file menu.htm.

Stammi bene...

Grazie mile, comunque intendevo dire Sito, non forum :)


EDIT: Scusate, un'altra domanda.
Ecco, questo è il CSS, per ridurre le colonne avete detto di ridurre width, ma non so quale.

/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			http://www.styleshout.com/
	TEMPLATE NAME: 	Bright Side of Life
   TEMPLATE CODE: 	S-0005
   VERSION:          1.0          	
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* top elements */
* { padding: 0; margin: 0; }

body {
	margin: 0;
	padding: 0;
	font: .70em/1.5em  Verdana, Tahoma, Helvetica, sans-serif;
	color: #666666; 
	background: #A9BAC3 url(bg.png);
	text-align: center;
}

/* links */
a { 
	color: #4284B0;
	background-color: inherit;
	text-decoration: none;
}
a:hover {
	color: #9EC068;
	background-color: inherit;
}

/* headers */
h1, h2, h3 {
	font: bold 1em 'Trebuchet MS', Arial, Sans-serif;
	color: #333;	
}
h1 { font-size: 1.5em; color: #6297BC; } 
h2 { font-size: 1.4em; text-transform:uppercase;}
h3 { font-size: 1.3em; }

p, h1, h2, h3 {
	margin: 10px 15px;
}
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
	color: #4284B0;
}
ul span, ol span {
	color: #666666; 
}

/* images */
img {
	border: 2px solid #CCC;
}
img.no-border {
	border: none;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
a img {  
  border: 2px solid #568EB6;
}
a:hover img {  
  border: 2px solid #CCC !important; /* IE fix*/
  border: 2px solid #568EB6;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #4284B0; 
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 15px;
 	padding: 0 0 0 20px;  	
  	background: #FAFAFA;
	border: 1px solid #f2f2f2; 
	border-left: 4px solid #4284B0;   
	color: #4284B0;
	font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; 
}

/* form elements */
form {
	margin:10px; padding: 0;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA; 
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:300px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	margin: 0; 
	font: bold 1em Arial, Sans-serif; 
	border: 1px solid #CCC;
	background: #FFF; 
	padding: 2px 3px; 
	color: #4284B0;	
}

/* search form */
form.searchform {
	background: transparent;
	border: none;
	margin: 0; padding: 0;
}
form.searchform input.textbox { 
	margin: 0; 
	width: 120px;
	border: 1px solid #9EC630; 
	background: #FFF;
	color: #333; 
	height: 14px;
	vertical-align: top;
}
form.searchform input.button { 
	margin: 0; 
	padding: 2px 3px; 
	font: bold 12px Arial, Sans-serif; 
	background: #FAFAFA;
	border: 1px solid #f2f2f2;
	color: #777;	
	width: 60px;
	vertical-align: top;
}

/***********************
	  LAYOUT
************************/
#wrap {
	background: #FFF;
	width: 900px; height: 100%;
	margin: 0 auto;	
	text-align: left;
}
#content-wrap {
	clear: both;
	margin: 0; padding: 0;	
	background: #FFF;
}

/* header */
#header {
	position: relative;
	height: 85px;	
	background: #000 url(headerbg.gif) repeat-x 0% 100%;	
}
#header h1#logo {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	text-transform: lowercase;
	top: 0; left: 5px;	
}
#header h2#slogan {
	position: absolute;	 
	top:37px; left: 95px;
	color: #666666;
	text-indent: 0px;
	font: bold 11px Tahoma, 'trebuchet MS', Sans-serif; 
	text-transform: none;	
}
#header form.searchform {
	position: absolute;
	top: 0; right: -12px;	
}

/* main */
#main {
	float: left;
	margin-left: 15px;
	padding: 0;
	width: 50%;		
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 15px 0 15px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* sidebar */
#sidebar {
	float: left;
	width: 23%;
	margin: 0;	padding: 0; 
	display: inline;		
}
#sidebar ul.sidemenu {
	list-style:none;
	margin:10px 0 10px 15px;
	padding:0;		
}
#sidebar ul.sidemenu li {
	margin-bottom:1px;
	border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
	display:block;
	font-weight:bold;
	color: #333;	
	text-decoration:none;	
	padding:2px 5px 2px 10px;
	background: #f2f2f2;
	border-left:4px solid #CCC;	
	
	min-height:18px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
	padding:2px 5px 2px 10px;
	background: #f2f2f2;
	color: #339900;
	border-left:4px solid #9EC630;
}

/* rightbar */
#rightbar {
	float: right;
	width: 23%;
	padding: 0; margin:0;		
}

/* Footer */
#footer { 
	clear: both; 
	color: #FFF; 
	background: #A9BAC3; 
	border-top: 5px solid #568EB6;
	margin: 0; padding: 0; 
	height: 50px;	  
	font-size: 95%;		
}
#footer a { 
	text-decoration: none; 
	font-weight: bold;	
	color: #FFF;
}
#footer .footer-left{
	float: left;
	width: 65%;
}
#footer .footer-right{
	float: right;
	width: 30%;
}

/* menu tabs */
#header ul {
	z-index: 999999;
	position: absolute;
   margin:0; padding: 0;
   list-style:none;
	right: 0; 
	bottom: 6px !important; bottom: 5px;
	font: bold 13px  Arial, 'Trebuchet MS', Tahoma, verdana,  sans-serif;	
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(tabright.gif) no-repeat right top;
   padding:6px 15px 3px 8px;
   color: #FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
	color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
	color: #FFF;
}
#header #current a span {
   background-position:100% -42px;
	color: #FFF;
}
/* end menu tabs */

/* alignment classes */
.float-left  { float: left; }
.float-right {	float: right; }
.align-left  {	text-align: left; }
.align-right {	text-align: right; }

/* additional classes */
.clear { clear: both; }
.green {	color: #9EC630; }
.gray  {	color: #BFBFBF; }

Potete dirmi qual'è?

#main {
float: left;
margin-left: 15px;
padding: 0;
width: 50%;
--------------------------------------
#sidebar {
float: left;
width: 23%;
margin: 0; padding: 0;
display: inline;
--------------------------------------
#rightbar {
float: right;
width: 23%;
padding: 0; margin:0;

[Ospite]

Be' dipende dagli id e dalle classi che corrispondono alla colonna... per esempio se hai una colonna che corrisponde all'id #wrap (mi sto riferendo al tuo codice) scriverai così:

<div id="wrap">

In questo modo la tua colonna avrà larghezza 900px. Se invece la vuoi ridurre dovrai scrivere sempre lo stesso codice, ma andare a modificare nello stile la larghezza di #wrap.
Spero di essere stato abbastanza chiaro ^^

Grazie mille.
Un'altra cosa, e scusate.
Come faccio a staccare il layout dal bordo superiore?

[Ospite]

non capisco cosa intendi...

http://powerex.altervista.org/
Staccare il box dove c'è scritto brightsideoflife dal margine della pagina, così che si veda lo sfondo.

E' una soluzione un pò stupida ma dovrebbe funzionare, prova a mettere un <br/> prima di <div id="wrap"> nel file html.

EDIT:
dimentica quello che ho detto, devi usare padding-top:" px", cerca su google come usarlo, io non me ne intendo molto di css.

[dreadnaut]

si, usare <br/> per spaziare è male, molto male. Dozzine di teneri gattini muoiono fra atroci sofferenze ogni volta che qualcuno lo fa nel suo sito.

Per separare, come sopra suggerito, usa padding-top: ... oppure margin-top: ..., a seconda se vuoi aggiungere spazio al box, o fra il box e ciò che lo precede.

[Ospite]

oppure potresti anche fare così:

<div>&nbsp;</div>

praticamente lasci uno spazio, senza stare a badare al padding eccetera ^^

[dreadnaut]

ecco si, ancora peggio grazie per un altro cattivo esempio

se solo non dipendesse dal margin e dal pagging di default, diverso per ogni browser, o eventualmente da quello assegnato per tutt'altra ragione ai <div> di quella pagina. Oltre ad aggiungere un elemento semanticamente nullo.

Se proprio si vuole, il modo corretto di introdurre una separazione è <hr/>, trasformato via css in qualcosa di più "guardabile" di una linea grigia magari.