How Can I Divide Space Proportionately Between Two Divs with a Fixed Width?

Two Divs, Dividing Space Proportionately

In a web page, you may encounter a scenario where you have two div containers, one with a fixed width and the other that should occupy the remaining available space. Configuring this setup effectively can be essential for responsive layout design.

To achieve this, you can utilize various CSS techniques. Here are two commonly used methods:

Method 1: Setting Width Properties

Set a specific width for the fixed-width div and use the calc() function to calculate the width of the other div accordingly. Ensure that the values in the calc() function consider the width of the fixed-width div, any margins or padding, and the desired proportion of the remaining space.

Method 2: Utilizing Display:table and Display:table-cell

Leverage the display: table and display: table-cell properties to create a table-like layout. Set the width property for the fixed-width div and adjust the width of the other div by specifying a percentage value. The percentage value will determine the proportion of the remaining space it should occupy.

Example Code:

Refer to the HTML and CSS code sample below, where the right div (with the class right) has a fixed width of 250px and the left div (with the class left) takes up the remaining space.

HTML:

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

CSS:

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

.right {
  float: right;
  width: 250px;
  min-height: 50px;
  margin-left: 10px;
  border: 2px dashed #00f;
}</code>

By utilizing these techniques, you can effectively divide space between two div containers, enabling you to create flexible and responsive web layouts.

The above is the detailed content of How Can I Divide Space Proportionately Between Two Divs with a Fixed Width?. For more information, please follow other related articles on the PHP Chinese website!