Auto-width element between fixed-width, floated elements

Position an element of variable width, between fixed width, floated elements

by Gerald Fullam

HTML

<div class="zone_wrapper">
    <div class="zones">
        <div class="zone_1">Zone 1</div>
        <div class="zone_2">Zone 2</div>
        <div class="zone_5">Zone 5</div>
        <div class="zone_4">Zone 4</div>
        <div class="zone_3">
            <input type="text" value="Zone 3 (Fluid)" />
        </div>
    </div>
</div>

CSS

.zone_wrapper
{
    position: relative;
    background-color: silver;
}
.zones
{
    font: normal 12px Arial, sans-serif;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}
div[class*='zone_']
{
	box-sizing: border-box;
    line-height: 44px;
    height: 44px;
}
.zone_1,
.zone_2
{
    float: left;
}
.zone_4,
.zone_5
{
    float: right;
}
.zone_1
{
    width: 200px;
    background-color: red;
}
.zone_2
{
    width: 57px;
    background-color: purple;
}
.zone_3
{
    overflow: hidden;
    padding: 0 8px;
    background-color: green;
}
.zone_3 input
{
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
}
.zone_4
{
    width: 57px;
    background-color: blue;
}
.zone_5
{
    width: 57px;
    background-color: sienna;
}