Tu hai:

div#navigation{
position: absolute;
top: 80px;
left: 0;
background-color: #B0E0E6;
width: 110px; height: 100%;
padding: 1em 0 0 10px;
border-left: 1px solid #000;
}

div#extra{
position: absolute;
top: 80px;
right: 0px;
text-align: center;
background-color: #B0E0E6;
width: 140px; height: 100%;
padding: 1em 5px;
border-right: 1px solid #000;
}

Il problema col posizionamento assoluto è che la lunghezza della colonna dipende dai contenuti. Puoi ovviare alla situazione usando il float. per ottenere 3 colonne che si allunghino insieme puoi fare così:

1) crei una gif ad es. di 700px x 10px e poi la dividi in 3 (150+400+150) e ad ognuna dai il colore che vuoi (nel tuo caso blu-bianco-blu). puoi anche aggiungere il bordo interno.

2) crei un #contenitore che abbia come background questa gif, cioè:

#contenitore {
width: 700px;
margin: 0;
padding: 0;
background: url(tre-in-uno.gif) repeat-y top left;


In questo modo le tre colonne andranno giù insieme. ripeto, dipende spesso dai contenuti. ciao