Align 3 divs to the left of parent container with overlapping - 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 3 divs to the left of parent container with overlapping

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
DIV.container {<!-- ww  w  . ja  v a  2  s . c om-->
   width:200px;
   height:;
   line-height:20px;
   font-size:19px;
   background-color:yellow;
}
DIV.BlocA {
   width:40px;
   background-color:red;
   float:left;
}
DIV.BlocB {
   width:40px;
   background-color:blue;
   float:left;
}
DIV.BlocC {
   width:40px;
   background-color:#666666;
   float:left;
}
DIV.BlocX {
   padding-right:9px;
   width:50px;
   background-color:#00E9E9;
   text-align:center;
   clear:both;
   float:;
   opacity: 0.70;
}
DIV.BlocY1, DIV.BlocY2 {
   width:20px;
   float:left;
}
#wrap{
   float:left;
   clear:both;
}

      </style> 
   </head> 
   <body> 
      <div class="container"> 
         <div class="BlocA">
             A 
         </div> 
         <div class="BlocB">
             B 
         </div> 
         <div class="BlocC">
             C 
         </div> 
         <div id="wrap"> 
            <div class="BlocY1" style="background-color:red;">
                Y1 
            </div> 
            <div class="BlocY2" style="background-color:green;">
                Y2 
            </div> 
         </div> 
         <div class="BlocX">
             X 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials