Float left and right is larger than wrapper div? [duplicate]

Question

I'm trying to create a colored column section in my email template. The problem that I'm having is the content wrapper that contains all the email content is set as per the code below. Likewise, the floating columns CSS are included.

#content {
  background-color: white;
  margin: auto;
  width: 600px;
  color: #888;
  font-size: 12px;
  border-radius: .6em .6em 0em 0em;
  box-shadow: 0px 0px 15px 0px #555;
}
.blueLeft {
  background-color: #33ccff;
  float: left;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
.blueRight {
  background-color: #33ccff;
  float: right;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
<div id="content">
   <div class="blueLeft">
      <p>
         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.
      </p> 
   </div>
   <div class="blueRight">
      <p>
           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.
      </p> 
   </div><div class="clearFloat"></div>
</div>

As you can see, the content wrapper has a width: 600px;, and the columns are each 300px. You would expect then that the columns would fill 100% of the width of the wrapper with no space in between. Putting the width as 50% is the same problem. So somehow, #content is displaying smaller than it should.

How do I edit it so that each column truly takes up 50% of the content width?

The result is this:

Answer 1

This is because you have width and padding.

If you add box-sizing: border-box; to .blueLeft and .blueRight it should fix your width issues.

For more information about why and how this works, here's is the MDN documentation on the CSS Box Model.