Having issues aligning 3 columns in HTML5

Question

This is how my webpage is currently displaying:

I want all three to be next to each other horizontally. I've tried adjusting padding and width, and that doesn't fix it. This is the current HTML I have:

<style>
  /* Create three equal columns that floats next to each other */
  .column {
    float: left;
    width: 30%;
    padding: 15px;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  /* Responsive layout - makes the three columns stack on top of 
  each other instead of next to each other if web browser size is reduced */
  @media screen and (max-width:600px) {
    .column {
      width: 100%;
    }
  }
</style>

This is the div:

  <div class="row">
    <div class="column">
      <h2>Column</h2>
      <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
      <h2>Column</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>

    <div class="column">
      <h2>Column</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    </div>
  </div>

Answer 1

Just add a wrapper div inside your column and apply padding to that. If you apply padding to column , it adds to the 30% width, which was causing the issue.

 /* Create three equal columns that floats next to each other */ .column { float: left; width: 30%; } .column .content { padding: 15px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other if web browser size is reduced */ @media screen and (max-width:600px) { .column { width: 100%; } } 

 <div class="row"> <div class="column"> <div class="content"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> <div class="column"> <div class="content"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> <div class="column"> <div class="content"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> </div> 

An alternate approach using css grid

 .row { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1em; } 

 <div class="row"> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> 

Answer 2

Flexbox is the perfect solution for this type of layout. Note the media query to change the alignment to a vertical layout for small screens instead of the horizontal layout for large screens.

For completeness I have added the vendor prefixes as well for cross browser compat.

 .row { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -webkit-flex; /* NEW - Chrome */ display: -moz-flex; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ width: 100%; /* needed for IE 11 */ flex-direction: row; } .column { flex-grow:1 } /* Responsive layout - makes the three columns stack on top of each other instead of next to each other if web browser size is reduced */ @media screen and (max-width:600px) { .row { flex-direction: column } } 

 <div class="row"> <div class="column"> <h2>Column</h2> <p>consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> <div class="column"> <h2>Column</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p> </div> </div> 

Answer 3

The reason this doesn't work as expected is that the width of each column is not 30% as you might expect, but 30% plus 15px padding . You could fix this by setting box-sizing: border-box; on the column. This tells the browser to include the padding in the width, which is often easier to work with (so in this case it would mean that your columns would always be 30% width, which I think is what you expect).

However , it would be better to take a different approach to layout here. Instead of using floats, you can use flexbox to handle this sort of layout in a more modern, robust way. If you want the columns to expand to fill exactly 1/3 of the available width, you could use the following styles:

.row {
  display: flex;
  flex-direction: row;
}

...and that's all you need! You can then add however much padding you like to your columns and their widths will still be as expected. In your media query (for the narrow layout) just set .row to display: block to switch off the flex layout.