align DIV right or left or center in CSS without absolute positioning - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Absolute Position

Description

align DIV right or left or center in CSS without absolute positioning

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">
#outer {<!--from  w  ww  .j av  a  2  s .c o m-->
   display:-webkit-flex;
   display:flex;
   -webkit-flex-direction:column;
   flex-direction:column;
}

#first {
   background-color:Chartreuse;
   width:100px;
   right:11px;
   align-self:flex-end;
   margin-right:11px;
}

#second {
   background-color:yellow;
   width:100px;
}
</style> 
 </head> 
 <body> 
  <div id="outer"> 
   <div id="first">
     &nbsp; 
   </div> 
   <div id="second">
     &nbsp; 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials