I am searching for a layout similar to this, click here.
Here is the basic HTML code I have:
#mainContent {
margin:0;
width:100%;
height:600px;
padding: 0 0 30px 0;
}
#mainContent #sidebar { /* sidebar inside #mainContent */
float:left;
width:220px;
height:560px;
margin:10px 10px 40px 10px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
}
#mainContent #featContent {
height:560px;
margin:10px 10px 40px 260px;
padding:10px 5px 10px 5px;
background-color:#CCCCCC;
overflow:auto;
} <div id="mainContent">
<div id="sidebar"></div>
<div id="featContent"></div>
</div>
The issue lies in one of the div placements. The #featContent div seems to be extending beyond its parent #mainContent div and I cannot figure out why. You can view this problem on jsFiddle here. The margin of #featContent exceeds the boundaries of #mainContent.