100% width split into 3* 33% divs - html

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+.

Answer 3

Alternately, you can modify your code a little and make use of CSS calc() function like below:
width: calc(33.3% - 10px);
Where each div width is 33.3% - ( 3px padding left + 3px padding right + 2px border left width + 2px border right width) - because padding and borders add values to the element width -.
This for .table1 and table3, but for the middle .table2 div there's no border-right nor border-left width values so it is only 6px instead of 10px
Also you have ltos of redundant code so I simplified it a little JS Fiddle
.container {
padding-top: 53px;
width:100%;
}
.table1, .table2, .table3{
border:2px solid;
float: left;
padding: 0 3px;
width: calc(33.3% - 10px);
text-align: justify;
}
.table1{
background-color: gray;
}
.table2{
border:none;
border-top:2px solid;
border-bottom:2px solid;
width: calc(33.3% - 6px);
}
<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 4

Flexbox works: do the following:
Apply reset:
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
Make .container a flex container:
.container {
padding-top: 53px;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
Apply this to each child (e.g. .table1, etc...):
flex: 1 0 auto;
Floats don't work in flex flow environments, so you can delete all float: left. added bonus is your columns match in height as well as width. If you wanted gutters (space between the columns like a newspaper), replace flex-start with space-between and decrease width if necessary.
html,
body {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.container {
padding-top: 53px;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.table1 {
border-style: solid;
border-width: 2px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 3px;
background-color: gray;
flex: 1 0 auto;
}
.table2 {
border-style: solid;
border-width: 2px;
border-left: 0px;
border-right: 0px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 3px;
flex: 1 0 auto;
}
.table3 {
border-style: solid;
border-width: 2px;
text-align: justify;
width: 33.3%;
padding-left: 3px;
padding-right: 53px;
flex: 1 0 auto;
}
<p>I have added an extra 50px to .table3 to demonstrate that all columns maintain a 33.33% width.</p>
<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>