Html 左右浮动大于包装器div？

我正在尝试在我的电子邮件模板中创建一个彩色列部分。我遇到的问题是，包含所有电子邮件内容的内容包装器是按照下面的代码设置的。同样，还包括浮动列CSS

#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>

#内容{
背景色：白色；
保证金：自动；
宽度：600px；
颜色：#888；
字体大小：12px；
边界半径：.6em.6em 0em 0em；
盒影：0px 0px 15px 0px#555；
}
蓝左先生{
背景色：#33ccff；
浮动：左；
显示：块；
宽度：300px；
填充：20px；
字体大小：16px；
}
布鲁里特先生{
背景色：#33ccff；
浮动：对；
显示：块；
宽度：300px；
填充：20px；
字体大小：16px；
}

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。


知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。

如您所见，内容包装的宽度为：600px，各列均为300px。然后，您会期望列将填充包装器宽度的100%，中间没有空格。将宽度设置为50%也是同样的问题。因此，不知何故，

#内容

显示的比它应该显示的小

我如何编辑它，使每列真正占据50%的内容宽度

结果是：

---

这是因为你有宽度和填充

如果添加到

.blueLeft

和

.blueRight

中，它应该可以解决宽度问题

---

有关这项工作的原因和方式的更多信息，请参阅。

祝福您。你又帮我省了两个小时的时间。我原以为填充物不会改变容器内东西的宽度，但现在它会改变，这是有道理的。@TonyWhite。是的，如果你不知道CSS框模型，这有点违反直觉。很乐意帮忙。嗨，托尼。添加代码时，最好尽可能简单，并删去所有细节。这里有一个例子：在你的大纲中有一些非模态的重复。也许这会有帮助。：）如果是电子邮件模板，为什么不使用表格？表在电子邮件中得到了很好的支持，一行有两个等宽的列使用表非常简单。