w images in header float issue - html

Question

I have a header that is larger than most screen widths. I centered that and I have the overflow hidden so when you expand your browser on a bigger screen more of it is visible. I also have 2 images on top of that, one floating right and one floating left. my problem is that the left image is in place floating left but the right image won't go all the way right. both if I put both images on the same z-index they just stack instead of floating right and left. Any suggestions? here is my css and html:
#triangleleft{
width:100%;
height:531px;
z-index:58;
position:absolute;
top:+53px;
}
#triangleright{
width:100%;
height:531px;
z-index:59;
position:absolute;
top:+53px;
}
.triangleleft{
background:url(Layer-58.png)no-repeat;
float:left;
margin-left:0px;
height:531px;
width:100%;
}
.triangleright{
background:url(Layer-59.png)no-repeat;
float:right;
margin-right:0px;
height:531px;
width:100%;
}
<div id="triangleleft">
<div class="triangleleft"></div>
</div>
<div id="triangleright">
<div class="triangleright"></div>
</div>
also here is the code for my header image that I think is screwing this up
#wrapper {
height:100%;
position: relative;
}
#Layer-57 {
position: relative;
height:529px;
background:#3b96a9 url(layer-57.jpg) top center no-repeat;
top:-529px;
overflow-x: hidden;
z-index: 57;
}
<div id="wrapper"> <div id="Layer-57"></div> </div>

Answer 1

replace your style with this
<style>
#triangleleft {
width:90%;
height: 531px;
z-index: 58;
position: absolute;
top: +53px;
}
#triangleright {
width:90%;
height: 531px;
z-index: 59;
position: absolute;
top: +53px;
}
.triangleleft {
background: url(Layer-58.png)no-repeat;
float: left;
margin-left: 0px;
height: 531px;
width: 100%;
}
.triangleright {
background: url(Layer-59.png)no-repeat;
float: right;
margin-right: 0px;
height: 531px;
width: 100%;
}
</style>

Answer 2

Revised Answer (previous answer removed for clarity's sake):
Looking closer at the leaderbe.com page you referenced in your comment below, I noticed that the HTML structure of the divs was quite different than what you had. You need to put the triangleright div inside the triangleleft div and use styles like follows:
See this jsfiddle: http://jsfiddle.net/uKrNT/2/
<div id="wrapper"> <div id="Layer-57">layer 57</div> </div>
<div id="triangleleft">
<div id="triangleright">
</div>
</div>
#triangleleft{
width:100%;
height:531px;
z-index:58;
position:absolute;
top:+53px;
float:left;
background:red url(http://www.leaderbe.com/images/diamond-left.png)no-repeat;
margin-left:0px;
overflow:visible;
opacity:.5;
}
#triangleright{
width:100%;
height:531px;
z-index:59;
float:right;
background:blue url(http://www.leaderbe.com/images/diamond-right.png)no-repeat;
margin-right:0px;
opacity: .5;
overflow:visible;
}
#wrapper { height:100%; position: relative; }
#Layer-57 { position: relative; height:529px; background:#3b96a9 url(layer-57.jpg) top center no-repeat; top:-529px; overflow-x: hidden; z-index: 57; }