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

Creating a Two-Column Layout with a Fixed-Width Right Column

In designing a website layout, it is common to require two columns, one with a fixed width and the other with a fluid width. This can be achieved through a combination of CSS properties and HTML structure.

To begin, it is essential to remove the float property from the left-hand column. Unlike the right-hand column, which requires a float and a defined width to fix its position, the left-hand column should remain flexible in width.

Furthermore, in the HTML code, the right-hand column should be placed before the left-hand column.

By applying an overflow: hidden property and a height value (either auto or a specific measurement) to the container div, the surrounding space will enclose both inner divs.

Finally, to ensure the left-hand column's independence from the fixed-width right-hand column, it is necessary to add a width: auto property and overflow: hidden property. This combination allows the left-hand column to expand without interfering with the right-hand column.

To demonstrate this layout, consider the following HTML and CSS code:

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; /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the
  other floated one */
  width: auto;
  overflow: hidden;
}

This layout effectively positions the right-hand column with a fixed width on the right side, while the left-hand column remains flexible and adjusts to the available space.

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