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

```