无法用固定宽度的2个div包裹我的中间100％宽度div

Question

My pen: http://codepen.io/helloworld/pen/AHdLm

I have 3 divs:

A left and right div with a fixed width of 40px; (red colored) Between is a middle div with a fluid width of 100%;

Of course 40px + 100% + 40px will always wrap the divs just like it is now.

I can not use position:fixed for a solution and I need it for IE8+.

How can I achieve that?

HTML

  <div id="wrapper">
    <div style="float:left;width:40px;height:80px;background:red;">Left</div>
            <div style="float:left;" class="table">
                <div id="navBar" >
                    <div class="cellContainer">
                        <div class="template">11</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">22</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">33</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">44</div>
                    </div>
                </div>
            </div>
     <div style="float:left;width:40px;height:80px;background:red;">Right</div> 
    <div style="clear:both" />
    </div>

CSS

.cellContainer {
    width: 20%;
    float: none;
    display: inline-block;   
}

.table {
    display: table;
    width: 100%;
    margin: 0 auto;
    background-color: orange;
}

.template{
    height: 80px;
    margin: 10px;
    background: lightgray;
    border: black solid 1px;
    padding-left: 5px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

#navBar {
    border: black solid 1px;
    text-align: center;
}

Answer 1

Use this css for .table

.table {
    position: absolute;
    left: 40px;
    right: 40px;
    margin: 0 auto;
    background-color: orange;
}

and use float: right; for the right div.

http://codepen.io/anon/pen/bspdn

Answer 2

try this:

<div id="wrapper">
    <div style="float:left;width:40px;height:80px;background:red;margin-left:-40px;">Left</div>
            <div style="float:left; width:100%;background:blue;" class="table">
                <div id="navBar" >
                    <div class="cellContainer">
                        <div class="template">11</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">22</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">33</div>
                    </div>
                  <div class="cellContainer">
                        <div class="template">44</div>
                    </div>
                </div>
            </div>
     <div style="float:right;width:40px;height:80px;background:red; margin-right:-40px;">Right</div> 
    <div style="clear:both"></div>
    </div>

css:

#wrapper {padding:0 40px;}

Example

however the above will not keep your columns the same height. If you want to do this you can go the display:table route (but this isn't compatible with earlier versions of ie):

Display table