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

Question

CSS Markup:

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
}

HTML Markup:

<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>

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.

Answer 1

You can get the .start and .end elements to span the full widths by specifying a width for the .content li.

<div id="tab-seperator">    
    <div id="left"> </div>       
    <div class="tab-wrapper">
        <ul id="oneline">                
            <li class="start">[start]</li>
            <li class="content">[testing..length]</li>
            <li class="end">[end]</li>                                
        </ul>        
    </div>  
    <div id="right"> </div>    
</div>

#oneline {display:table;width:100%;background:#555;}
.start, .content, .end {display:table-cell;}
.content {width:50%;background-color:#777;}

See here for it in action: http://codepen.io/joe/pen/Ffzqm