容器內不適合大

Question

問題是#lesson容器不適合內#container。我怎樣才能讓只有3個容器適合一列？ CSS忍者，我需要你的幫助:)

我的CSS：#container - 主容器，#first - 綠色容器，#lesson - 灰色的div。

#container { 
    position: relative; 
    top: 70px; 
    left: 80px; 
    width:100%; 
    height:80%; 
} 

#first { 
    background-color: #A1D490; 
    width:45%; 
    height:100%; 
    float:left; 
    border:2px solid black; 
    margin: 5px; 
} 

.lesson { 
    position: relative; 
    background-color: #DCDDDE; 
    margin:10px; 
    width:200px; 
    height:200px; 
    border:1px solid; 
    text-align: center; 
} 

HTML：

<div id="container"> 
    <div id="first"> 
     <tpl for="."> 
     <div class="lesson"; > 
      <p class="txt"><b>Lesson:</b> {lesson} </p> 
      <p class="txt"><b>Score:</b> {score}</p> 
     </div> 
     </tpl> 
    </div> 
    <div id="second"> 
    </div> 
    </div> 

Answer 1

有關大一個，你只需要從ID首先刪除高度100％裝配容器

#first { /* height: 100% */ } 

Answer 2

Codepenhttp://codepen.io/noobskie/pen/dYGLeo

這似乎是我在這裏工作的罰款。你確定你沒有任何其他的CSS被應用和覆蓋規則的地方？

HTML

<div id="container"> 
    <div id="first"> 
    <div class="lesson"> 
      <p class="txt"><b>Lesson:</b> {lesson} </p> 
      <p class="txt"><b>Score:</b> {score}</p> 
    </div> 
    <div class="lesson"> 
      <p class="txt"><b>Lesson:</b> {lesson} </p> 
      <p class="txt"><b>Score:</b> {score}</p> 
    </div> 
    <div class="lesson"> 
      <p class="txt"><b>Lesson:</b> {lesson} </p> 
      <p class="txt"><b>Score:</b> {score}</p> 
    </div> 
    <div class="lesson"> 
      <p class="txt"><b>Lesson:</b> {lesson} </p> 
      <p class="txt"><b>Score:</b> {score}</p> 
    </div> 
    </div> 
</div> 

CSS

#container { 
    position: relative; 
    top: 70px; 
    left: 80px; 
    width:100%; 
    height:80%; 
} 

#first { 
    background-color: #A1D490; 
    width:45%; 
    height:100%; 
    float:left; 
    border:2px solid black; 
    margin: 5px; 
} 

.lesson { 
    position: relative; 
    background-color: #DCDDDE; 
    margin:10px; 
    width:200px; 
    height:200px; 
    border:1px solid; 
    text-align: center; 
}