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

2-Column Div Layout: Achieving a Fixed-Width Right Column and Fluid Left Column

Challenge:

Creating a two-column layout where the right column has a fixed width while the left column dynamically adjusts to the available space.

Code Provided:

The code provided attempts to implement the layout using float and margin, but encounters issues.

Solution:

To establish a fixed-width right column while maintaining fluidity in the left column, follow these guidelines:

1. Remove Float on Left Column: Remove the float property from the left column (#content).
2. Reorder HTML Columns: Place the right column (#right) before the left column in the HTML code. This ensures that the right column's width is applied first.
3. Apply Overflow to Outer Div: Add overflow: hidden and a height (e.g., height: auto) to the outer div (div.container). This prevents the inner divs from overflowing the container.
4. Set Left Column Width and Overflow: Set the left column's width to auto and add overflow: hidden. This allows the column to fill the remaining space and prevents interaction with the right column.

Example Code:

HTML:

<div class="container">
  <div class="right">
    Right content with fixed width
  </div>
  <div class="left">
    Left content with 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;
}

Demo:

Visit [this JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/) for a working demonstration.

The above is the detailed content of How to Create a Two-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!