How to Create Two Inline-Block Columns With 50% Width

Solutions with CSS properties

It is possible to create two inline-block columns having 50% width and avoid floats. It’s quite easy to do. You need to set the width of both columns to 50%, and set the display to “inline-block”. Also, add the clear property with the "both" value.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of adding two inline-block columns with 50% width:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .clear {
        clear: both;
      }
      .clear div {
        width: 50%;
        display: inline-block;
      }
      #col1 {
        background-color: #3ad67d;
        float: left;
      }
      #col2 {
        background-color: #d5d6e6;
      }
    </style>
  </head>
  <body>
    <div class="clear">
      <div id="col1">Text 1</div>
      <div id="col2">Text 2</div>
    </div>
  </body>
</html>

Try it Yourself »

Result

Text 1

Text 2

So, in this way, you can have two columns, both having 50% width and avoid the wrapping of the second column.

Let's see another example, where we use the flex-basis property set to 50%.

Example of creating two columns with 50% width by using the flex-basis property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex {
        display: flex;
      }
      .flex div {
        flex-basis: 50%;
        display: inline-block;
      }
      #col1 {
        background-color: #3ad67d;
      }
      #col2 {
        background-color: #d5d6e6;
      }
    </style>
  </head>
  <body>
    <div class="flex">
      <div id="col1">Text 1</div>
      <div id="col2">Text 2</div>
    </div>
  </body>
</html>