Fill Remaining Width After a Float

Use overflow: hidden to make div tags fill the remaining width after floats.

by posco2k8

HTML

<div class="wrapper">
    <div class="pull-left demo-content-1">
        Demo 1
    </div>
    <div class="green-box">
        Fill the remaining space.
    </div>
</div>

<div class="wrapper">
    <div class="pull-left demo-content-2">
        Demo 2
    </div>
    <div class="green-box">
        Fill the remaining space.
    </div>
</div>

<div class="wrapper">
    <div class="pull-left demo-content-3">
        Demo 3
    </div>
    <div class="green-box">
        Fill the remaining space.
    </div>
</div>

<div class="wrapper">
    <div class="pull-left demo-content-4">
        Demo 4
    </div>
    <div class="green-box">
        Fill the remaining space.
    </div>
</div>

CSS

.wrapper {
    margin-top: 10px;
}

.pull-left {
    float: left;
}

.green-box {
    overflow: hidden; /* Creates a new block format context, which will make this tag fill the remaining width */
    background: green;
    color: white;
}

.demo-content-1,
.demo-content-2,
.demo-content-3,
.demo-content-4 {
    font-weight: bold;
    background: blue;
    color: white;
}

.demo-content-1 {
    width: 100px;
}

.demo-content-2 {
    width: 150px;
}

.demo-content-3 {
    width: 200px;
}

.demo-content-4 {
    width: 250px;
}