Kind Div Erweiterung von Elternteil div Problem

Question

Ich möchte etwas wie this, click here.

Dies ist ein einfacher Code in meinem HTML:

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

 

 

 

Das Problem ist einer der divs sind falsch platziert .Die #featContent div aus seiner Mutter #mainContent div wird Aus Gründen, die ich nicht verstehe. Überprüfen Sie dies in jsFiddle here. Der Rand von #featContent verlässt die #mainContent-Grenzen.

Answer 1

........................... Demo Hallo jetzt geben #mainContent: overflow:hidden;

#mainContent{ 
overflow:hidden; 
} 

Live demo

Answer 2

Add padding Eltern 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/