Panels not aligning correctly

Hi there,

I am creating a sticky type panel that opens to the left when you click on the button. You can see an illustration below:

[url]http://d.pr/i/3jfC[/url]

And when you click a button the following action should happen:

[url]http://d.pr/i/A4NA[/url]

The only problem with this is the panel that flies out will not align with the button and the text or divs on the page move out of the way too instead of the panel floating over the top. Here is my CSS and html:

[CODE].panel_like {
float: right;
top: -555px;
display: none;
background: #EBEBEB;
border:2px solid #000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
width: 580px;
height: 200px;
padding: 10px 120px 10px 10px;
filter: alpha(opacity=85);
opacity: .85;
z-index: 99999;
}

.panel_links {
float: right;
top: 100px;
display: none;
background: #EBEBEB;
border:2px solid #000;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
width: 690px;
height: 240px;
padding: 10px 120px 10px 10px;
filter: alpha(opacity=85);
opacity: .85;
z-index: 99999;
}

.panel p,.panel-like p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger-chat, a.trigger-support{
position: absolute;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:black;
width: 100px;
height: 20px;
padding: 5px 15px 5px 10px;
font-weight: 500;
background:#EBEBEB;
border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
-moz-border-radius-topri: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
display: block;
}

a.trigger-chat:hover, a.trigger-support:hover{
width: 120px;
height: 20px;
position: absolute;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:black;
padding: 5px 15px 5px 10px;
font-weight: 500;
background:#EBEBEB;
border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
-moz-border-radius-topri: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
display: block;
}

a.active.trigger-chat, a.active.trigger-support {
background:#222222 url(images/minus.png) 15% 55% no-repeat;
}

a.trigger_links, a.trigger_like{
position: absolute;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:black;
width: 30px;
height: 30px;
padding: 0px 15px 0px 10px;
font-weight: 500;

border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
-moz-border-radius-topri: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
display: block;
}

a.trigger_links{background:#EBEBEB url(/images/share.png) no-repeat;}
a.trigger_like{background:#EBEBEB url(/images/thumb.png) no-repeat;}

a.trigger_links:hover, a.trigger_like:hover{
width: 120px;
height: 25px;
position: absolute;
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:black;
padding: 0px 15px 0px 10px;
font-weight: 500;
border-right: 2px solid #000;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
-moz-border-radius-topri: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
display: block;
}
a.trigger_like:hover{background:#EBEBEB url(/images/social.png) no-repeat}
a.trigger_links:hover{background:#EBEBEB url(/images/share.png) no-repeat;}

a.active.trigger-links, a.active.trigger-like {
background:#222222 url(images/minus.png) 15% 55% no-repeat;
}

#slide-container {top: 400px;height: 100px;position: absolute;}
#slide-ocntainer ul{list-style-type: none; display:block}
#slide-container li{padding-bottom:40px}[/CODE]

here is the html:

[CODE]<div id=”slide-container”>
<ul>
<li><a class=”trigger-chat” href=”#”><img style=”float: left;padding-right: 5px;” src=”/images/chat.png” alt=”link” height=”25″ width=”18″ />Live Chat</a></li>
<li><a class=”trigger-support” href=”#”><img style=”float: left;padding-right: 5px;” src=”/images/support.png” alt=”link” height=”25″ width=”18″ />Support</a></li>
<li><a class=”trigger_links” href=”#”></a></li>
<li><a class=”trigger_like” href=”#”></a></li>

</ul>

</div>

<div class=”panel_links”>
<img src=”/images/link-content.png” alt=”thumb” />
</div>
<div class=”panel_like”>
<img src=”/images/like-content.png” alt=”thumb” />
</div>[/CODE]

Can anyone assist me with this one please?

Also in #CSS _↴