Trying to get 3 divs floating full lenth of screen while middle div is dynamic

[SilverEye]

CSS Markup: \[code\]body { margin: 0; background:#FFAA00;}#left { position: relative; background: url(footer_bg_social2.png) repeat-x 0 -70px; overflow:hidden; height: 70px;}#right { position: relative; background: url(footer_bg_social2.png) repeat-x 0 -70px; overflow:hidden; height: 70px;}#tab-seperator { height: 70px;}#tab-seperator div.tab-wrapper { position: relative; height: 70px; float:left;}#tab-seperator ul { position: relative; float: left; margin: 0; padding: 0;}#tab-seperator ul li { float:left; display:block; height: 70px; line-height: 70px; vertical-align:middle;}#tab-seperator ul li.start { background: url(footer_bg_social2.png) no-repeat 0 0; width:22px}#tab-seperator ul li.content { background: url(footer_bg_social2.png) repeat-x 0 -140px;}#tab-seperator ul li.end { background: url(footer_bg_social2.png) no-repeat -248px 0; width:22px}\[/code\]HTML Markup:\[code\]<div id="tab-seperator"> <div id="left"> </div> <div class="tab-wrapper"> <ul> <li class="start"></li> <li class="content">testing..length</li> <li class="end"></li> </ul> </div> <div id="right"> </div> </div>\[/code\]So I am looking to get the left and right div to make up the full width of my page, varying in size depending how long the middle section grows. Having issues getting this to work...the above solution is getting two lines both making up full page width, ofcourse I want this all on 1 line.