Ребенок, расширяющийся из родителя

Question

У меня есть div div внутри div main_content, но у них нет слота внутри родителя.

Я сделал свое исследование, и я попытался плавать: оставил родителя, но, к сожалению, он разрушает изогнутые края и тень, поэтому что-то явно не так.

Внутри дочерних divs у меня есть флажок, который при тике, расширяет панель текста, но та же проблема возникает, когда divdoes не увеличивается в размере, это рассматривается отдельно от того, что должно быть дочерним.

jsfiddle http://jsfiddle.net/aNgVj/

Вот HTML

<div id="wrapper"> 
    <div id="main_content"> 
     <h1 class="standard">Team Directory</h1> 
     <div class="plaque_left"> 
      <h2>Blackhawks</h2> 
      <h3>EB Netball CLub</h3> 
      <p>www.random.com</p> 
      <p>More text</p> 
      <p>and more...</p> 
      <p>and more</p> 
      <p>finally...</p> 
       <input type="checkbox" name="show" id="show"/> 
       <label for="show">Named Players</label> 
       <article class="small">More content here 
        <br/> 
         <br/>and here 
         <br/>end 
       </article> 
     </div> 
    </div> 
</div> 

И связанный CSS

#wrapper { 
    background: white; 
    position: relative; 
    width: 77em; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    border: 2px solid white; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: 0 0 40px black 
} 
#main_content { 
    background: white; 
    position:relative; 
    width: 76em; 
    height: 100%; 
    margin-left: auto; 
    margin-right: auto 
} 

и (только левые дивы, как код одинаков для правых див, кроме поплавок: правый)

.plaque_left { 
    display:block; 
    height: 23.5em; 
    margin: 1em 1em 1em 5em; 
    padding: 0 1em 0 1em; 
    background: white; 
    -webkit-box-shadow: 0 0 10pt grey; 
    float:left; 
    width:38%; 
    -webkit-border-radius:10pt 
} 
.plaque_left article { 
    background:#d0a9f5; 
    -webkit-border-radius: 10pt; 
    overflow:hidden; 
    height: 0px; 
    position: relative; 
    z-index:10; 
    -webkit-transition: height 0.3s ease-in-out 
} 
.plaque_left input:checked ~ article { 
    -webkit-transition: 0.5s ease-in-out 
} 
.plaque_left input:checked ~ article.small { 
    height: 140px; 
    position:relative 
} 

Чтобы подтвердить, первая проблема заключается в том, что дивизии .plaque не включены в div #main_content. Во-вторых, когда флажок расширяется, чтобы показать дополнительный контент, он разливает outdie div бляшки, если я не выбираю auto, что означает, что я могу прокручивать, но это не то, что я ищу, я хочу, чтобы div бляшки изменялся, чтобы позволить расширенный содержание.

Заранее спасибо

Answer 1

Я предлагаю вам добавить overflow: hidden к #wrapper:

#wrapper {overflow: hidden;} 

Это самый простой способ, чтобы заставить обертку вложить плавали предметы.

Answer 2

plaque_left ДИВ не расширяется в высоту, потому что у вас есть это исправлено: height: 23.5em;. Вы можете использовать min-height или полностью удалить высоту.

Answer 3

Добавьте элемент, такой как div, который очистит поплавки и не позволит им свернуть. Вы можете использовать этот стиль:

.clearFloat{ 
    clear: both; 
} 

Тогда вы можете создать пустой DIV в нижней части основного содержания, что будет ясно (освободить место для) элементов, расположенных над ним. Вы можете увидеть поведение в следующей скрипке:

http://jsfiddle.net/aNgVj/1/