html - Span content over two divs -
i have following code text in red div respond/wrap around yellow box. possible (ideally without js)?
#div1 { float: left; width: 300px; } #div2 { float: left; width: 50%; background-color: blue; } #div3 { float: left; width: 50%; background-color: red; } p span { width: 250px; height: 50px; left: 20px; display: inline-block; clear: both; float: left; background-color: yellow; position: relative; }<div id="div1"> <div id="div2"> <p>bonorum has. ut cibo quas tantas, vis ut probo adhuc definiebas, has @ meis debet vulputate. no sed velit essent suavitate, <span>overlap me</span> in pro decore ceteros temporibus, usu in odio offendit theophrastus. mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. ut vim simul aperiam.</p> </div> <div id="div3"> <p>bonorum has. ut cibo quas tantas, vis ut probo adhuc definiebas, has @ meis debet vulputate. no sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. ut vim simul aperiam.</p> </div> </div>
it'll take more structure, , fixed top offset, can done:
#div1 { float: left; width: 300px; } #div2 { float: left; width: 50%; background-color: blue; } #div3 { float: left; width: 50%; background-color: red; } .post { float: right; width: .1px; height: 100px; } .interruptor { width: 260px; height: 180px; left: 20px; clear: both; float: left; background-color: yellow; position: relative; } #div3 .interruptor { width: 130px; left: 0; z-index: -1; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<div id="div1"> <div id="div2"> <div class="post"></div> <div class="interruptor"> <div class="video-container"> <iframe width="560" height="315" src="https://www.youtube.com/embed/e2--l-yx1hu" frameborder="0" allowfullscreen></iframe> </div> </div> <p>bonorum has. ut cibo quas tantas, vis ut probo adhuc definiebas, has @ meis debet vulputate. no sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. ut vim simul aperiam.</p> </div> <div id="div3"> <div class="post"></div> <div class="interruptor"></div> <p>bonorum has. ut cibo quas tantas, vis ut probo adhuc definiebas, has @ meis debet vulputate. no sed velit essent suavitate, in pro decore ceteros temporibus, usu in odio offendit theophrastus. mel labore indoctum cu, ad soleat admodum delicatissimi sed, mei viris tritani ullamcorper eu. ut vim simul aperiam.</p> </div> </div>
Comments
Post a Comment