Floating toolbar on bottom, centered, 80% of current screen width

Question

I'm trying to implement a Facebook like toolbar on the bottom of the screen for a website I'm currently working on.

Currently, I have it 100% of the width of the screen but I'd like to have it look almost exactly like Facebook's toolbar, centered, bottom justified on top, around 80% of the current screen's width.

Here is the current CSS for the toolbar I have that is 100% of the screen's width.

Thanks in advance.

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

use:

left:10%;
right:10%;

Answer 2

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

How's that?

Edit: damn, too slow! :D

Answer 3

css:

container {

width: 100%;

}

toolbar {

width: 80%;
height: 40px;
margin-right: auto;
margin-left: auto;

}

Html:

Answer 4

I am having a similar issue that I need a bit of help with. I have a floating toolbar positioned at the bottom, but right now it "floats" down and follows the page as you scroll. Instead I want it to be in a fixed position at the bottom and have the content scroll behind it.

Example of what I am looking for is at the bottom of this page: foodzie [dot] com

Here is what my page looks like now, with the floating bar... what do I change in order for it to "stick" to the bottom? Thanks in advance:

http://nexus.shi.tingull.com/ login: demo pass: testing10

Renée