Float an image between 2 columns of text
I'd like to know if it's possible to reproduce in CSS/HTML the effect you see in this magazine, with an image floated between 2 columns of text and the text wrapping around it:
I know only modern browsers support 2-column layouts, so my questions are:
- Can this be done in modern browsers开发者_如何学Go? If so, how? We are essentially doing a "float:both" but ofc that directive doesn't exist....
- Is there any backward compatible hack to sort of do it in older browsers?
Finally, if you can do this in HTML/CSS, I would think the image would still have to be square, so that the wrapping effect would not be as organic as it is here. Would it be possible to reproduce the effect exactly, rather than having the image square with whitespace, eg, to the left and right of Ron Paul's head? Would you have to slice up the image to accomplish that?
It's not easily doable (especially for dynamic text). All the techniques have various downsides.
Here's one possible technique for "float center":
http://css-tricks.com/9048-float-center/
For modern browsers, there's a jQuery plugin that can do it precisely:
http://www.jwf.us/projects/jQSlickWrap/
Here's the tedious, manual version that inspired the above jQuery plugin:
http://www.alistapart.com/articles/sandbags
Curvelicious Otherwise known as a ragged float by Eric Meyer.
Also Sandbags
精彩评论