How to Create a 2-Column Layout with a Fixed-Width Right Column and a Fluid Left Column?

2-Column Div Layout: Right Column with Fixed Width, Left Fluid

Question:

You're seeking a solution to create a two-column layout with a fixed-width right column and a flexible left column. Despite exploring various suggested approaches, none have met your specific needs.

Answer:

To achieve your desired layout, the following modifications are necessary:

1. Remove Float from Left Column: Remove the float property from the left column. Its width will be determined automatically.
2. Reverse Column Order in HTML: In your HTML code, ensure the right column precedes the left column. This allows the fixed-width right column to establish its width before the fluid left column adjusts.
3. Add Overflow and Height to Outer Div: Apply an overflow: hidden property and a specific height or auto height to the outer div. This ensures it encapsulates both inner divs.
4. Configure Left Column CSS: For the left column, add width: auto and overflow: hidden. These properties keep the left column independent from the fixed-width right column.

Example HTML and CSS:

<div class="container">
  <div class="right">
    Right content fixed width
  </div>
  <div class="left">
    Left content flexible width
  </div>
</div>

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

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

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

By implementing these adjustments, you can create the desired two-column layout with a fixed-width right column and a fluid left column.

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