浮动DIV宽度= 100％-其他两个浮动div的宽度

Question

OK, so here is my problem,

I need to have four DIV s in one line. The First three are float:left and the fourth one is float:right . The container has a specified width.

I need the third div to fill all the space from the second div that is floated to the left, to the fourth div that is floated right.

EDIT: DIVs #1, #2 and #4 have dynamic width as well... They have a certain padding and the content defines the width.

Answer 1

Why not turn the question on its head, and establish how to create the layout you want- in which case, likely the simplest approach would be:

Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>fit</div>
    <div class='cell'>fit</div>
    <div class='cell'>expand</div>
    <div class='cell'>fit</div>
</div>

CSS

.table {
    display:table;
    width:100%; /* <-- will make the divs align across the full browser width */
    height:50px;
}
.cell {
    display:table-cell;
    border:1px solid red;
    width:1%; /* <-- will make 1, 2, 4 only fit their content */
}
.cell:nth-child(3) {
    width:100%; /* <-- will make 3 expand to the remaining space */
}

Answer 2

Solution Using Floated Elements

Here is one way of doing this using floats.

Arrange your HTML as follows:

<div class="panel-container">
    <div class="panel p1">Panel 1 - and a word</div>
    <div class="panel p2">Panel 2 - Done. </div>
    <div class="panel p4">Panel 4 - End!</div>
    <div class="panel p3">Panel 3</div>
</div>

and apply the following CSS:

.panel-container {
    width: 600px;
    border: 1px dotted blue;
    overflow: auto;
}
.panel {
    background-color: lightgray;
    padding: 5px;
}
.p1 {
    float: left;
}
.p2 {
    float: left;
}
.p3 {
    background-color: tan;
    overflow: auto;
}
.p4 {
    float: right;
}

The trick is to place the floated elements ( .p1 , .p2 . .p4 ) ahead of the in-flow content ( .p3 ).

Use overflow: auto on the parent container to keep the floated child elements from affecting the layout outside of the parent element.

I added overflow: auto on .p3 so that the padding gets included within the containing block.

See fiddle at: http://jsfiddle.net/audetwebdesign/9G8rT/

Comments

The one disadvantage of this approach is that the order of the content is altered, that is, .p3 appears after .p4 in the code order.

Another side effect, which may be desirable in a responsive design, is that the child elements will wrap onto 2 or more lines as the parent container width gets smaller.

If you need to retain the content order in the HTML code, the CSS table-cell solution is a good alterantive.

The table-cell solution will keep the child elements on a single line regardless of the width of the parent container.

One final advangtage of the floated element solution is that it is more backward compatible than a CSS table-cell solution, but as we move forward, this is becoming less of a compelling argument.