Make Absolute positioning and float left/right - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Absolute Position

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

Description

Make Absolute positioning and float left/right

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from w  w w  . ja va 2  s .  c  o  m-->
 <body> 
  <div class="parent" style="position:absolute;height:70%;width:70%;top:15%;left:15%;background-color:#eee;border:solid blue 1px;"> 
   <div class="left" style="position:absolute;width:30%;height:70%;top:15%;left:0%;background-color:black;z-index:20;">
     left box vertically aligned 
   </div> 
   <div class="right" style="position:absolute;width:30%;height:70%;top:15%;left:70%;background-color:black;z-index:20;">
     right box vertically aligned 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials