How to Create a Layout with One Fixed-Width Div and a Flexible-Width Div?

Divs with Variable Width Distribution

In web development, it's often useful to create a layout where two divs share the available space, but one div has a fixed width.

Question:

How can you adjust the width of divs so that one maintains a fixed width while the other takes up the remaining space?

Solution:

To achieve this, follow these steps:

1. HTML Structure:

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

2. CSS:

For Fixed Width Right Div:

<code class="css">.right {
    float: right;
    width: 250px;  // Set your desired fixed width
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}</code>

For Flexible Width Left Div:

<code class="css">.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}</code>

3. Additional Notes:

• You can also use display: table instead of float for better cross-browser compatibility.
• Adjust the width property of .right based on your specific requirements.
• This approach ensures that the fixed-width div remains unchanged, while the flexible-width div adjusts to fill the remaining space.

The above is the detailed content of How to Create a Layout with One Fixed-Width Div and a Flexible-Width Div?. For more information, please follow other related articles on the PHP Chinese website!