In the PRINT world that technique is called: “text-wrap” . TMK, there is really no specific term for doing a text-wrap across columns of text except a “spanning text wrap”. In the web world the technique is not entirely feasible and most likely not practical at all.
take a look at this technique/example:
CSS:
#page-wrap { width: 60%; margin: 80px auto; position: relative; }
#image { position: absolute; top: 0; left: 50%; margin-left: -185px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 205px; height: 389px; }
#l:before { float: right; }
#r:before { float: left; }
MARKUP:
<div id="page-wrap">
<img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" id="image">
<div id="l">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="r">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
It works in limited circumstances. See the only way to make content wrap around is with float. But FLOAT makes an element ‘float to the top’ ( not really the top… but its hard to explain other wise) of it’s container. Also you can only float left or right. So for the example I actually positioned the image in with absolute positioning and created pseudo elements on each columns to open up the space. This already convoluted and I am not done with the explanation yet! Your CSS has to know the specific size of you image content… meaning you would need to change technique for each image. second, while with even MORE wrangling you could make it so that the image is not at at the top… then the layout would break if the page is fluid or if the user changes text sizes.
But really that shouldn’t be what discourages you form that technique…
What should discourage you has to do with UI and usability. Web users don’t read column like they do in print. they dont scroll don to the bottom of a block of text only to have to scroll back up again continue reading the same story. If you have done this you have made a truly bad website experience for your users. In order to keep the image in context, spanning text wrap assumed the image was wrapped on all sides by columns of the same story. Imagine your text goes over one screen height… are you willing to make your users have to scrollup and down and up and down and up and down just so you can keep this print design effect?