occhio di fissare una larghezza perchè io con un monitor largo vedo tutto un casino.

Cmq il tuo problema è dato dal fatto che a te ci vuole un contenitore che comprenda tutto il contenuto, invece attualmente hai a destra il div extra che dopo un po' giustamente si interrompe, perchè il suo contenuto finisce.
Devi riorganizzare un po' il tutto, io farei così:
<div id="container">
<div id="testata"></div>
<div id="contenuto">
<div id="navigazione">menu navigazione</div>
<div id="centrale">contenuto effettivo della pagina</div>
</div>
<div id="footer"></div>
</div>

così facendo riesci a gestire quelle tue immagini, la testata avrà la porzione superiore, il contenuto invece avrà una immagine ripetuta con il tuo bordino (io sinceramente farei una immagine unica che abbia il bordo a dx e a sx) , alta mettiamo 30px e ripetuta lungo l'asse delle y.
Così facendo avrai un raccordo col footer che avrà la terza immagine in basso.
Poi ci sarebbero dei raffinamenti da fare, cmq il concetto di base secondo me è quello che ti ho indicato.