DIV width: auto is 0 pixel - html

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>

Answer 2

flexbox can do that.
Codepen Demo - Click "View Compiled" for all vendor prefixes
* {
box-sizing: border-box;
}
.fullwidth {
height: 20px;
display: flex;
}
.fullwidth .left,
.fullwidth .right {
flex: 1 0 auto;
}
.left {
background-color: green;
}
.center {
background-color: red;
flex: 0 0 100px;
margin-left: -100px;
}
.right {
background: blue;
}
.line {
/* center point reference for demo only */
position: absolute;
height: 50px;
left: 50%;
width: 1px;
border-right: 1px solid green;
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="line"></div>

Answer 3

You could use CSS calc function
.fullwidth {
width: 100%;
height: 20px;
}
.fullwidth div {
float: left
}
.left {
background-color: green;
height: 20px;
width: calc(50% - 50px);
}
.center {
background-color: red;
height: 20px;
width: 100px;
}
.right {
background: blue;
height: 20px;
width: calc(50% - 50px);
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>