Ukuser32 Ukuser32 - 3 years ago 147
HTML Question

Span content over two divs

I have the following code where I would like the text in the red div to respond/wrap around the yellow box. Is this even 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. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at 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. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at 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>




Answer Source

It'll take more structure, and a fixed top offset, but it can be 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. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at 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. His ut cibo quas tantas, vis ut probo adhuc definiebas, has at 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>

Fiddle demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download