Absolute positioning in FF - css

Question

I´ve got a problem with position:absolute in FF. I´ve got a bar with a width of 100% and two bars with a static width on the left and right side.
I need to do set the inner Bar to 100% to make it responsive. It looks bad when I give percentage-values to the borders.
In Chrome and even IE!!! it´s working fine but Firefox adds both short bars to the right side (like on the picture).
HTML:
<div id="wrapper">
<div class="row-fluid">
<div class="span12">
<div id="slider">
<button class="scrllbtn">〈</button>
<div id="sliderFrame">
<div id="innerSlider">
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
</div>
</div>
<button class="scrllbtn">〉</button>
</div>
<div id="videos"></div>
</div>
</div>
</div>
Styles:
#wrapper
{
width: 960px;
margin: 0 auto;
border: solid 1px red;
}
#slider {
padding-top: 0.4em;
clear:left;
width:100%;
height: 160px;
display:block;
}
#sliderFrame {
width:100%;
height:160px;
overflow-x: hidden;
overflow-y:hidden;
float:left;
border-top: solid 1px #043860;
border-bottom: solid 1px #043860;
}
#innerSlider {
width:950px;
height:200px;
clear:none;
}
.scrllbtn {
position: absolute;
height:162px;
width: 20px;
}
.scrllbtn:first-child {
clear:left !important;
}
.scrllbtn:last-child {
margin-left: -20px;
float:right;
}
.scrllbtn:focus {
outline: none;
}
.videoButton {
float:left;
width:200px;
height:160px;
}
Fiddle
Any suggestetions how I could solve that problem?

Answer 1

somthing like this :)
demo
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
.main {
position: absolute;
width: 100%;
height: 500px;
background: red;
}
.right {
position: absolute;
top: 0;
right: 0;
background: orange;
width: 100px;
height: 500px;
}
.left {
position: absolute;
top: 0;
left: 0;
background: gray;
width: 100px;
height: 500px;
}

Answer 2

Adding the following rule makes it work in my copy of Firefox:
.scrllbtn:first-child {
left: 0;
}
Fiddle

Answer 3

fix problem in your example :)
demo
<button class="scrllbtn scrllbtnleft">〈</button>
<button class="scrllbtn scrllbtnright">〉</button>
.scrllbtnleft {
left: 0;
}
.scrllbtnright {
right: 0;
}