Schwebende Symbolleiste unten, zentriert, 80% der aktuellen Bildschirmbreite

Question

Ich versuche, eine Facebook-ähnliche Symbolleiste am unteren Bildschirmrand für eine Website zu implementieren, an der ich gerade arbeite.

Derzeit habe ich es 100% der Breite des Bildschirms, aber ich möchte es fast genau wie Facebooks Symbolleiste aussehen, zentriert, unten auf der Oberseite, etwa 80% der aktuellen Bildschirmbreite.

Hier ist die aktuelle CSS für die Symbolleiste, die ich habe, die 100% der Bildschirmbreite ist.

Vielen Dank im Voraus.

CSS:

<style type="text/css"> 
#toolbar 
{ 
background:url('/_assets/img/toolbar.gif') repeat-x; 
height:25px; 
position:fixed; 
bottom:0px; 
width:100%; 
left:0px; 
border-left:1px solid #000000; 
border-right:1px solid #000000; 
z-index:100; 
font-size:0.8em; 
} 
</style> 

Answer 1

Verwendung:

left:10%; 
right:10%; 

Answer 2

width: 80%; 
left: 10%; 
right: 10%; 

Wie ist das?

Answer 3

CSS:

#container { 
    width: 100%; 
} 
#toolbar { 
    width: 80%; 
    height: 40px; 
    margin-right: auto; 
    margin-left: auto; 
} 

HTML:

<div id="container"> 
    <div id="toolbar"></div> 
</div>