How to Accommodate a Fixed-Width Div and a Remaining Space Div in Web Design?

Accommodating Fixed-Width and Remaining Divs

In web design, a common challenge is accommodating two divs, where one has a specific fixed width and the other needs to dynamically occupy the remaining space.

CSS-Based Solution

One effective approach utilizes CSS:

.left {</p>
<pre class="brush:php;toolbar:false">width: 83%;

}

.right {

width: 16%;

}

This CSS configuration ensures that the .left div occupies 83% of the available width, while the .right div takes up the remaining 16%, preserving the desired fixed width for the .left div.

Display: Table Method

Alternatively, the display: table property offers a powerful solution:

<div class="right"></div><br><div class="left"></div>

.left {</p>
<pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

}

.right {

display: table-cell;
width: 16%;

}

By setting the display property to table for the parent container and table-cell for the divs, the browser effectively creates a two-column table, with the fixed-width div appearing in one cell and the remaining space dynamically filling the other cell.

Conclusion

Both CSS and display: table methods provide effective solutions to the problem of accommodating a fixed-width div while allowing the other div to occupy the remaining space. The best approach depends on the specific requirements and browser compatibility considerations.

The above is the detailed content of How to Accommodate a Fixed-Width Div and a Remaining Space Div in Web Design?. For more information, please follow other related articles on the PHP Chinese website!