Align two divs, one at top one at bottom within its container div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Parent Container

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

Description

Align two divs, one at top one at bottom within its container div

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 {<!--from  w w  w.  j  av  a 2  s . co m-->
   position:relative;
   height:100px;
   width:100px;
   border:2px solid Chartreuse;
}

#div1, #div2 {
   position:absolute;
}

#div1 {
   top:0
}

#div2 {
   bottom:0;
}
</style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="div1">
     div 1 
   </div> 
   <div id="div2">
     div 2 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials