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>

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>

• javascript
• html
• css

3 Answers 3

use:

left:10%;
right:10%;

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

How's that?

css:

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

Html:

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