Place div to the left bottom corner of its container - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Parent Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Parent Container

Description

Place div to the left bottom corner 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">
.contentContainer {<!--  ww w. j av  a  2 s . c  om-->
   width:201px;
   float:left;
}

.largeImage {
   width:100px;
   height:100px;
   float:left;
   background:blue;
}

.content {
   width:100px;
   height:100px;
   float:right;
   background:green;
   position:relative;
}

.bottomImage {
   background:red;
   color:Chartreuse;
   width:61px;
   height:21px;
   position:absolute;
   bottom:0px;
   left:0px;
}

.clear {
   clear:both;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="contentContainer"> 
    <div class="largeImage">
      LARGE IMAGE 
    </div> 
    <div class="content"> 
     <div class="contentContent">
       CONTENT 
     </div> 
     <div class="bottomImage"> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials