vertical-align

by ponyspy

HTML

<div class="outer">


  <div class="inner">
    <div class="containter">
        <div class="header">
          <div class="header_inner">
            <div class="dd">1</div>
            <div class="dd">2</div>
            <div class="dd">3</div>      
          </div>
        </div>
        <div class="content">
          <div class="content_inner">
            <div class="ev">e1</div>
            <div class="ev">e2</div>
            <div class="ev">e3</div>
            <div class="ev">e4</div>
            <div class="ev">e5</div>
          </div>
        </div>
        <div class="footer">
          <div class="footer_inner"></div>
        </div>
    </div>    
  </div>
  
  
  <div class="inner">
    <div class="containter">
        <div class="header">
          <div class="header_inner">
            <div class="dd">1</div>
            <div class="dd">2</div>
            <div class="dd">3</div>      
          </div>
        </div>
        <div class="content">
          <div class="content_inner">
            <div class="ev">e1</div>
            <div class="ev">e2</div>
            <div class="ev">e3</div>
            <div class="ev">e4</div>
            <div class="ev">e5</div>
          </div>
        </div>
        <div class="footer">
          <div class="footer_inner"></div>
        </div>
    </div>
  </div>  
  
  
</div>

CSS

.outer {
  width:400px;
  overflow: scroll;
}

.outer, .inner {
  display: inline-block;
	white-space: nowrap;
	vertical-align: top; 
}

.containter {
  width:400px;
  height:500px;
  background:#fc0;
  display:table;
}

.header, .content, .footer {
  display:table-row;
}
.header {
  background:green;
  /* height:100px; */
}
.dd {
  height:40px;
  width: 100%;
  background-color: brown;
}
.content > .content_inner {
  height:100%;
  vertical-align: top;
  display: table-cell;
  background-color: green;
}

.ev {
  width: 100%;
  height: 20px;
  background-color: maroon;
  margin-bottom: 10px;
}

.footer {
  height: 40px;
  background: #f00;
}