How to Create a Two-Column Layout with a Fixed-Width Right Column?

How to Create a Two-Column Layout with a Fixed-Width Right Column

In web design, it's often necessary to create a layout with two columns, one of which has a fixed width while the other is fluid. Despite being a common requirement, finding a solution that works consistently can be challenging.

In this specific case, the goal is to create two columns where the right column maintains a constant width while the left column expands or contracts based on the available space. Here's a step-by-step answer:

1. Remove Float from Left Column: Removing the float property on the left column allows it to flow naturally.
2. Move Right Column Before Left Column: In the HTML, the right column should come before the left one.
3. Set Width and Float on Right Column: Define a fixed width for the right column and apply a float to it (e.g., float: right).
4. Add Overflow and Height to Outer Div: Apply an overflow: hidden and a height (can be auto) to the outer div containing both inner columns.
5. Add Auto Width and Overflow to Left Column: Set the width of the left column to auto and apply overflow: hidden. This ensures its independence from the right column.

Example HTML:

<div class="container">
  <div class="right">
    Right Content (Fixed Width)
  </div>
  <div class="left">
    Left Content (Flexible Width)
  </div>
</div>

CSS:

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

This solution creates the desired two-column layout with a fixed-width right column while allowing the left column to adjust dynamically based on the browser window size.

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