CSS layout, middle column fixed-width And positioned, two external liquid column widths, no spacing

Question

I have a container element that should contain 3 divs (or table cells or flexboxes or something else). The container has a fixed size. Say a width of 500 pixels, a height of 100 pixels.

The middle div should be a fixed width, e.g. 100px. It should also be moved by installing css. For this example, suppose it is fixed at a distance of 225 pixels to the left.

The two remaining divs should fill the remaining space on each side (or not take up space when there is no space, even if the middle div moves outside the container border). There should be no space between the side divs and the middle div, and there should be no overlap between the side divs and the middle div.

All internal virgins are 100% high (i.e. 100 pixels).

container 500x100
----------------------------------------------------------------------------|
| |-------------------------------| |---------------------| |-------------| |  
| |  left, fluid                  | | middle, positioned  | | right,fluid | |
| |                               | |at 225px, 100px width| |             | | 
| |-------------------------------| |---------------------| |-------------| | 
----------------------------------------------------------------------------|

Answer 1

Ever heard of u ?? CSS Tables calc

Note. This solution is compatible with CSS3, so IE8 and below do not support this answer !! :)

HTML

<div class="container">
    <div class="left">left</div>
    <div class="cent">cent</div>
    <div class="right">right</div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div { /* just for demo */
    height:300px;
    border:1px solid red
}
.container {
    display:table;
    width:100%;
    height:100%;
    table-layout:fixed;
}
.left, .right, .cent {
    display:table-cell /*aabara-kaa-dabara*/
}
.cent {
    width:225px; /* fixed center */
}
.left, .right {
    width : calc(50% - 225px) /* make left and right divs fluid */
}

EDIT

In case you want the center to give a sense of movement through rezise, ​​you have to play with adjacent div width... something like:

.left {
    width : calc(30% - 225px);
}

.right{
    width : calc(70% - 225px);
}

Answer 2

If we use markup as follows:

<div class="container">
    <div class="box1">a</div>
    <div class="wpr">
        <div class="box2">b</div>
        <div class="box3">c</div>
    </div>
</div>

.. we can use overflow formatting contexts: hidden or overflow: automatically for this.

Hover over the container in the violin to see the effect

Fiddle

CSS

.container{
    width:500px;
    height:100px;
}
.wpr {
    overflow:hidden;
    height: 100px;
    background:aqua;
}
.box1, .box2, .box3 {
    height: 100px;
}
.box1 {
    background:pink;
    float:left;
    min-width: 50px;
    -webkit-transition: min-width 1s;
    -moz-transition: min-width 1s;
    -o-transition: min-width 1s;
    transition: min-width 1s;
}
.box2 {
    background:purple;
    width:100px; /*fixed width */
    display:inline-block;
    float:left;
}
.box3 {
    background:orange;
    display:inline-block;
    overflow:hidden;
    width: calc(100% - 100px);  /*100px is same as box with fixed width */
}
.container:hover .box1 {
    min-width: 450px;
}

Answer 3

.

<table class="container">
    <tr>
        <td class="box1">
        </td>
        <td class="box2">
        </td>
        <td class="box3">
        </td>
    </tr>
</table>

CSS :

.container{
    background:#dadada;
    width:500px;
    height:100px;
    border:none;
    border-collapse:collapse;
}
.box1{
    background:red;
    width:100px; /* This will set the position of Middle Box as well as occupy the space in left */
}
.box2{
    background:blue;
    width:350px; /* This will set the width of Middle Box */
}
.box3{
    background:green;
    /*This will automatically occupy the space in the right */
}

You can find the demo here: http://jsfiddle.net/s78A6/