Floating content div

[Tischnoetentoet]

Hi all,

I have a content area (just a normal div without any style) and a floating div:

#rightBar
{
border-left: solid 2px gray;
float: right;
width: 0px;
padding-left: 10px;
overflow: hidden;
background-color: gray;
background-image: url('images/bar/expand.gif');
background-repeat: no-repeat;
}

#rightBar:hover
{
float: right;
padding: 10px;
width: 230px;
background-color: #F3C702;
background-image: none;
}

It all works nice, except:"

The bar should be floating above the content inside the content. So, if the user hovers the rightBar, it grows in width, but the content inside the rightBar makes the text inside the normal content div move up (the rightBar content is pushing the normal content away).

When there is no content in the rightBar, everything works fine (I see an empty bar) so it must be the content inside the rightBar that is pushing the content away.

Any ideas?