css - Content of one div to overlap content of another -
say have following structure:
<div id="top" style="width:960px; height:400px; margin 0 auto; background-color:#f00;"> </div> <div id="bottom" style="width:960px; height:400px; margin 0 auto; background-color:#00f;"> <div id="overlapingdiv"> large content here ... </div> </div>
how can make div id "overlapingdiv" come out "bottom" div 20px , overlap "top" 1 share background colors of both "top" , "bottom" divs (20px "top" div , rest "bottom" one)?
you can float overlapingdiv
, give negative margin, e.g.
<div id="top" style="width:960px; height:400px; margin 0 auto; background-color:#f00;"> </div> <div id="bottom" style="width:960px; height:400px; margin 0 auto; background-color:#00f;"> <div id="overlapingdiv" style="float:left; margin-top: -20px;"> content here ... </div> </div>
see jsfiddle sample.
Comments
Post a Comment