div con mở rộng ra khỏi vấn đề div cha mẹ

Question

Tôi muốn một cái gì đó như this, click here.

Đây là một mã đơn giản trong HTML của tôi:

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

 

 

 

Vấn đề là một trong những divs được không đúng cách đặt .Công #featContent div là đi ra khỏi div mẹ #mainContent của nó vì lý do tôi không hiểu. Kiểm tra điều này trong jsFiddle here. Lề của #featContent nằm ngoài giới hạn #mainContent.

Answer 1

........................... Demo Hi tại cung cấp cho #mainContent: overflow:hidden;

#mainContent{ 
overflow:hidden; 
} 

Live demo

Answer 2

Add padding để mẹ 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; 
}​ 

Demo hrer http://jsfiddle.net/j4C7T/