Aligning boxes and sizing children and put text to the bottom of its container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

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

Description

Aligning boxes and sizing children and put text to the bottom of its container

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">
.picture {<!--from   w w  w  .ja va 2s  . c  o  m-->
   width:21%;
   margin:6px;
   float:left;
   position:relative;
}

.image {
   width:100%;
   height:201px;
   background-color:Chartreuse;
}

.description {
   background-color:yellow;
   position:absolute;
   bottom:0;
   width:100%;
}
</style> 
 </head> 
 <body> 
  <div class="picture"> 
   <div class="image"></div> 
   <div class="description">
     A description 
   </div> 
  </div> 
  <div class="picture"> 
   <div class="image"></div> 
   <div class="description">
     A description 
    <br> Extra 
    <br> lines 
   </div> 
  </div> 
  <div class="picture"> 
   <div class="image"></div> 
   <div class="description">
     A description 
   </div> 
  </div> 
  <div class="picture"> 
   <div class="image"></div> 
   <div class="description">
     A description 
   </div> 
  </div> 
  <div class="picture"> 
   <div class="image"></div> 
   <div class="description">
     A description 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials