make the bottom edge of columns align to the same level - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

make the bottom edge of columns align to the same level

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#wrapper {<!-- w  ww  . j av  a 2s  .  c  om-->
   width: 250px;
}
.column, .column_long {
   display:inline-block;
   background-color: red;
   height: 100px;
   width: 50px;
   margin-right: 10px;
   margin-bottom: 10px;
}
.column_long {
   background-color: blue;
   float: right;
   height: 214px;
}


      </style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div class="column"></div> 
   <div class="column"></div> 
   <div class="column"></div> 
   <div class="column_long"></div> 
   <div class="column"></div> 
   <div class="column"></div> 
   <div class="column"></div> 
  </div>  
 </body>
</html>

Related Tutorials