Align the middle section to the bottom in portrait mode tablet - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Row

Description

Align the middle section to the bottom in portrait mode tablet

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">

.container{<!--  w ww  .j a va  2  s  . c  o  m-->
   width: 100%;
   border: 1px solid red;
   display: table;
}
.section{
   display: table-cell;
   height: 50px;
   border: 1px solid black;
   text-align: center;
   vertical-align: middle;
}
.section:nth-child(1), .section:nth-child(3){
   width: 30%;
}
@media screen and (max-width: 600px) {
   .section:nth-of-type(2) {
      position: absolute;
      top: 100px;
      left: 45%;
   }
   .section:nth-of-type(1), .section:nth-of-type(3) {
      width: 50%;
   }
}


      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="section">
     Section 1 
   </div> 
   <div class="section">
     Section 2 
   </div> 
   <div class="section">
     Section 3 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials