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

Solutions with HTML and CSS

In this tutorial, we’ll create a <div> layout with two columns, the right column of which has a fixed width.

This is possible if we set the float and width properties for the right column, while the left column must not have a width and float.

Let us demonstrate an example.

Example of creating a two-column <div> layout having a right column with a fixed width:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        height: auto;
        overflow: hidden;
      }
      .right {
        width: 200px;
        float: right;
        background: #fffc54;
      }
      .left {
        background: #e3e3dc;
        width: auto;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="right">Right part</div>
      <div class="left">Left part</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

Right part

Left part

In the example above, we also applied the overflow property with the “hidden” value and height to the outer <div> in order that it surrounds the inner <div> elements. For the left column, we specified the width property with the “auto” value and overflow set to “hidden”, thus making the left column independent from the right column.

The above solution requires putting the right column before the left one.

If you want to keep the correct HTML markup, you can try the following.

Example of adding a two-column <div> layout with a right column having a fixed width:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
        #container {
        width: 100%;
        background: #e8d2fa;
        float: left;
        margin-right: -200px;
      }
      #content {
        background: #e8d2fa;
        margin-right: 200px;
      }
      #sidebar {
        width: 200px;
        float: right;
    </style>
  </head>
  <body>
    <div id="container">
      <div id="content">
        <h2>Lorem Ipsum</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
        <p class="last"> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
    <div id="sidebar">
      <h2>Content</h2>
      <ul>
        <li>What is Lorem Ipsum</li>
        <li>Why do we use it</li>
        <li>Where does it come from</li>
      </ul>
    </div>
  </body>
</html>