容器内不适合大

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; 
}