Css 子div从父div问题展开

我想要像这样的东西

这是我的HTML中的一个简单代码：

#主要内容{
保证金：0；
宽度：100%；
高度：600px；
填充：0 30px 0；
}
#mainContent#侧边栏{/*侧边栏内#mainContent*/
浮动：左；
宽度：220px；
高度：560px；
利润率：10px 10px 40px 10px；
填充：10px 5px 10px 5px；
背景色：#中交；
}
#主要内容#主要内容{
高度：560px；
利润率：10px 10px 40px 260px；
填充：10px 5px 10px 5px；
背景色：#中交；
溢出：自动；
}

---

将填充添加到父div

#mainContent {
    margin:0;
    width:100%;
    height:auto;
    padding:10px 5px 40px 5px; background-color:red
}
#mainContent #sidebar { /* sidebar inside #mainContent */
    float:left;
    width:220px;
    height:560px;
    margin:10px 10px 40px 10px;
    background-color:#CCCCCC;
}
#mainContent #featContent {
    height:560px;  
    margin:10px 10px 40px 260px;
    background-color:#CCCCCC;
    overflow:auto;
}​

演示hrer

将以下样式添加到

#mainContent

#mainContent {
  overflow:hidden;
}

---

如果我们给我们的子容器提供浮点数，那么我们应该清除浮点数，这样if将提供溢出：隐藏；到父div中，以便子浮动元素将被清除…：-）我需要在child div中添加填充，因为我不希望它们的内容粘在背景颜色的边缘。罗希特·阿扎德给出了一个有效的答案@Ajinx999我不是说子元素填充，我是说#maincontent parent div padding，所以我们不应该在那里提供填充，我们只能使用overflow:hidden；正如rohit所做的，我们将得到解决方案……非常感谢！成功了。：）但我不明白。写这篇文章怎么会把布局搞砸呢？溢出和它有什么关系？好的，我读了链接中的描述。它只是说它是如何使用的，而不是它是如何工作的？写溢出是如何做到这一点的？