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

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

media player - Android: mediaplayer went away with unhandled events -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -