100% width split into 3* 33% divs

Question

I've been trying to use 3 divs like a table, so to make 3 columns I thought I#d make 3 33% divs. That works fine and they fill the page up, but as soon as I want to add padding to make the text move off the border, the 3rd div moves into the next line. Any suggestions to keep padding but all 3 in one row would be appreciated.

Code:

CSS:

.container {
   padding-top: 53px;
   width:100%;
}

.table1{
   border-style: solid;
   border-width: 2px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
   background-color: gray;
}

.table2{
   border-style: solid;
   border-width: 2px;
   border-left: 0px;
   border-right: 0px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
}

.table3{
   border-style: solid;
   border-width: 2px;
   float: left;
   width: 33.3%;
   text-align: justify;
   padding-left: 3px;
   padding-right: 3px;
}

HTML:

<div class="container">
  <div class="table1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="table2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="table3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 1

You could add box-sizing: border-box to the elements so that the padding/border is included in its height/width calculations:

.table1, .table2, .table3 {
  box-sizing: border-box;
}

I'd suggest adding a common class to the tables as well:

Example Here

.table {
  width: 33.33%;
  box-sizing: border-box;
}

Answer 2

Use display: table and table-layout: fixed for the container and display: table-cell for columns:

.container {
    display: table;
    table-layout: fixed; /* For equal column widths regardless of their number. */
    width: 100%;
}

.container > DIV {
    display: table-cell;
}

Unlike floats, this method is guaranteedly free from any gaps between columns and on each side of the container.

Unlike Flexbox (IE10+), it works in IE8+.