100% width split into 3* 33% divs

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:

<html>
<head></head>
<body>
  <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>
</body>
</html>

solution

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;
}