CSS - border not going over elements that float left - html

Question

I have this code here:
<div style="border:3px solid #808080;">
<h1 style="text-transform: uppercase;font-size: 38px;color: #808080;text-align: center;">Lowell</h1>
<div class="column-1">
<img src="images/ruler-icon.png">
</div>
<div class="column-2">
<img src="images/bed-icon.png">
</div>
<div class="column-3">
<img src="images/bath-icon.png">
</div>
</div>
my problem is that the border does not go over the column-1, column-2, column-3...those elements are floating left, how do I get them to be included in the border?
Here is the CSS
.column-1, .column-2, .column-3
{
float:left;
width: 33%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
}

Answer 1

Either add a div in parent with clear:both property right after the floated divs as mentioned by RemyaJ. like this
https://jsfiddle.net/zmasvt8b/
Or
Simply give overflow:hidden property to the parent div. Like this
https://jsfiddle.net/jv5xtLg9/

Answer 2

I realize you've already chosen an answer, but here is an alternative - using flexbox. I also separated all the CSS from the HTML (like it should be!)
.container {
/* Important for columns */
display: -webkit-flex;
display: flex;
}
.item {
/* Important for columns */
flex-grow: 1;
border: 3px solid #808080;
border-top: none;
height: 52px;
padding: 10px;
}
.heading {
border: 3px solid #808080;
margin: 0;
text-transform: uppercase;
font-size: 38px;
color: #808080;
text-align: center;
}
/* Remove duplicate borders */
.item-2 {
border-left: none;
border-right: none;
}
<h1 class="heading">Lowell</h1>
<div class="container">
<div class="item item-1">
<img src="images/ruler-icon.png">
</div>
<div class="item item-2">
<img src="images/bed-icon.png">
</div>
<div class="item item-3">
<img src="images/bath-icon.png">
</div>
</div>

Answer 3

Add a div with style clear:both after the floated divs inside parent div. This will hopefully fix this issue.

Answer 4

I think this is the css you need. Choose the width according to your needs.
.column-1, .column-2, .column-3
{
width: 30%;
border-right: 3px solid #808080;
height: 52px;
padding: 10px;
display:inline-block;
}

Answer 5

The reason for this is that parent elements are never to contain floated elements. To make this happen, just add overflow:auto; to your main div. That will force the div to contain floated elements that "overflow" the container.
There are other, probably better ways to accomplish the same thing but this is the easiest.
Never, ever add HTML elements to do what CSS can and should do.