Question

can some one please tell me how can i make this two divs Overlap instead of being side by side

hc_menu & #hc_show_hide

jsfiddle
and this is the
code :
css :

   .chart_scroll{  height: 100%;}
    #hc_hover{height:100%;width: 25%; float: right;}
    #hc_menu{height:400px ;background-color: Black;opacity:0.4;margin:50px 0px 50px 20px;width:125px ; float:right;}
    #hc_show_hide{height:500px ; width: 15% ;float:right ; background:red;}

html :

 <div class="chart_scroll" runat="server" id="pnlCharts">
              <div id="hc_hover" >
              <div id="hc_show_hide"></div>
                <div id="hc_menu">
                    
                </div>
              </div>
           </div>

Answer 1

If you mean overlap, then you’ll need to set position:absolute and adjust your z-index to determine which one is on top.

There’s some changes to your code, so here’s the updated CSS, and a new fiddle:

 .chart_scroll{  height: 100%;} 
#hc_hover{height:100%;width: 25%; float: right; position:relative; /* Keeps the children inside of its boundry */}
        #hc_menu{height:400px ;background-color: Black;opacity:0.4;margin:50px 0px 50px 20px;width:125px ; float:right; position:absolute;  right:0; /* lets it occupy the same space, aligned to the right */  z-index:50 /* puts this one on top */ }
        #hc_show_hide{height:500px ; width: 15% ;float:right ; background:red;  position:absolute; right:0; /* lets it occupy the same space, aligned to the right */ }