# Facebook persistent bottom bar

**URL:** <https://forum.kirupa.com/t/facebook-persistent-bottom-bar/288017>\
**Category:** web dev\
**Created:** [May 9, 2009, 2:38pm UTC](https://forum.kirupa.com/t/facebook-persistent-bottom-bar/288017 "2009-05-09T14:38:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![NeoDreamer](https://avatars.discourse-cdn.com/v4/letter/n/ccd318/32.png) [@NeoDreamer](https://forum.kirupa.com/u/NeoDreamer)\
**Post date:** [May 9, 2009, 2:38pm UTC](https://forum.kirupa.com/t/facebook-persistent-bottom-bar/288017/1 "2009-05-09T14:38:55Z")

</div>

I’m trying to get a similar effect to Facebook’s persistent bottom bar. My situation is a little different:

![](http://forum.kirupa.com/uploads/kirupa/5383/5898d1ba71821899.png)

```auto

#barLeft {
   display: fixed;
   width: 150px;
   height: 50px;
   left: 0;
   bottom: 0;
}

#barRight {
   display: fixed;
   width: 100%;
   height: 50px;
   left: 150px;
   bottom: 0;
}

```

Somehow I need to set barRight’s width to 100% - 150px so it doesn’t extend beyond the screen, but expressions aren’t allowed in CSS. So how can this be done?