DIV width: auto is 0 pixel

Question

I'm new in CSS and have not not found the solution for this basic problem. I have 3 divs in one line. The center div must have fixed width and it's position also fixed px from the center. I need auto width for the left and right div to fill the space at the left/right side. Here is my try but the left and right divs are zero width. Thanks for the help!

.fullwidth{
    width:100%
    height:20px;
}
.left{
    background-color:green;
    float:left;
    height:20px;
    width: auto;
}
.center{
    background-color:red;
    position:absolute;
    right:50%;
	margin-right:100px;    
    height:20px;
    width:100px;
}
.right{
    background:blue;
    float:right;
    height:20px;
    width: auto;
}

<div class="fullwidth">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Answer 1

What you're looking for is known as the flexible box model design, it is fairly new so there are some vendor prefix requirements although I have emitted them for simplicity. You may have noticed that there is poor support for Internet Explorer so if that's a concern you may need to look for alternatives. Regardless take a look of it in use:

.fullwidth {
  width: 100%;
  height: 20px;
  display: flex;
}
.left {background-color: green;}
.center {
  background-color: red;
  width: 100px;
}
.right {background: blue;}
.left,.right {flex: 1;}

<div class="fullwidth">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>