How to Make a Div Take Up Remaining Space After a Fixed Width Div?

How to Adjust Two Divs, One with Fixed Width and the Other Taking Up the Remaining Space

When working with two div containers where one needs a specific width and the other should dynamically occupy the remaining space, there are a few approaches to achieve this layout. Let's explore two methods:

Using Display: Table or Table-Cell

With this method, we use CSS display properties to create a table-like structure:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

In this case, the "right" div has a fixed width of 250px, while the "left" div takes up the remaining space due to its "overflow: hidden" property.

Using Float and Percentage Width

Another approach involves using the CSS float property and setting the width of the divs as percentages:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

Here, the "left" div occupies 83% of the available width, leaving 16% for the "right" div with a fixed width.

Example Demo

Check out the following live demo on JSFiddle to see these methods in action: http://jsfiddle.net/SpSjL/

The above is the detailed content of How to Make a Div Take Up Remaining Space After a Fixed Width Div?. For more information, please follow other related articles on the PHP Chinese website!