CSS layout, middle column is fixed-width AND positioned, two outer columns fluid width, no spacing

css, flexbox, html

Solution

Ever heard of `CSS Tables` and `calc`??

Note : This Solution is CSS3 compliant, so IE8 and below would not support this answer!! :)

Working Demo

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 u want center to give feel of moving around on rezise, you'll have to play with `adjacent div`s `width`...something like :

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

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

Working Demo

Problem

I have a container element which must hold 3 divs (or table cells or flexboxes, or whatever). The container is fixed size. Let's say 500px width, 100px height. The middle div must be fixed width, say 100px. It must also be able to be moved around by setting the css. For this example, let's say it is fixed at 225 pixels from the left. The two remaining divs should fill up the remaining space on each side (or take up no space when there's no room, even if the middle div is moved past the boundary of the container). There should be no space between the side divs and the middle div, nor should there be any overlap between the side divs and the middle div. All the innner divs are 100% height (i.e. 100px). ``` container 500x100 ----------------------------------------------------------------------------| | |-------------------------------| |---------------------| |-------------| | | | left, fluid | | middle, positioned | | right,fluid | | | | | |at 225px, 100px width| | | | | |-------------------------------| |---------------------| |-------------| | ----------------------------------------------------------------------------| ```

Original source