Align on top and on bottom in the DIV - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Div Align

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Div Align

Description

Align on top and on bottom in the DIV

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
.table {<!--   ww w  .jav  a2 s .c  om-->
   display:table;
   border:2px solid;
}

.cell {
   float:none;
   display:table-cell;
   height:auto;
}

.cell1
 {
   border-left:2px solid;
   border-right:2px solid;
   float:none;
   display:table-cell;
   height:auto;
}

.cell .btn {
   vertical-align:bottom;
}
</style> 
 </head> 
 <body> 
  <div class="table"> 
   <div align="center" class="cell"> 
    <p>Some text</p> 
    <a type="button" class="btn" href="#">Button</a> 
   </div> 
   <div align="center" class="cell1"> 
    <p>The big one text</p> 
    <a type="button" class="btn" href="#">Button</a> 
   </div> 
   <div align="center" class="cell"> 
    <p>Some small text </p> 
    <a type="button" class="btn" href="#">Button</a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials