Center af 3 div

jeg har en div på 900px bred som sidder centeret altid.

i den har jeg jeg 3 div'er en med menu grafikstart og selve menu og en menu grafik slut.

starten og sluting er altid 32px brede

men selve menu kan være forskellige brede..

hvordan får man de 3 til atid at sidde centret på siden.

kode:

HTML:

<div id="page">
    <div id="toplogo">
        <h1>f.DK</h1>
    </div>
   
    <div id="menukontainer">
        <div id="menubarstart"></div>

            <div id="menubar">
                <ul id="menubarul">
                    <li id="menubarli">Forsiden</li>
                    <li id="menubarli">Links</li>
                    <li id="menubarli">Web Design</li>
                    <li id="menubarli">Kites</li>
                    <li id="menubarli">Blandte</li>
                    <li id="menubarli">ORANGE</li>
                    <li id="menubarli">p g æ Å jy</li>
                </ul>
            </div>
   
        <div id="menubarslut"></div>
    </div>
</div>


CSS:

body {
background-color:#000000;
margin:0px;

}


#page{
margin:0 auto;
width:950px;
min-height:20px;
background-color:#000000;

}

#toplogo{
margin:0 auto;
background-color:#000000;
width:950px;
height:90px;
padding:5px;
margin-bottom:10px;
text-align:center;
}

#menukontainer{
width:950px;
margin:auto;
border:#999999 1px solid;
background-color:#00000;
height:32px;
}

#menubar{
height:32px;
max-width:800px;
float:left;
}

#menubarstart{
height:32px;
width:21px;
background-image:url(../grafix/barstart.png);
background-repeat:no-repeat;
float:left;
}

#menubarslut{
height:32px;
width:21px;
background-image:url(../grafix/barslut.png);
float:left;
}