W3docs
en
Log in

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

In this tutorial, we’ll explain how to create a two-column <div> layout with the right column having a fixed width. Here, you can find some examples.

Tags

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 be floated or have a fixed width.

The following example demonstrates this approach.

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

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

<!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

<div class="demo px-2.5 mt-1 mb-5 not-prose"> <div class="right">Right part</div> <div class="left">Left part</div> </div> In the example above, we applied the overflow property with the “hidden” value to the outer <div> to clear the floats and ensure it surrounds the inner elements. For the left column, we specified the width property with the “auto” value and set overflow to “hidden”, which creates a new block formatting context so it flows naturally beside the floated right column.

Info

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:

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

<!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>
Try it Yourself »
Note

The negative margin technique in the second example works well for fixed layouts but may require adjustments for responsive designs.