CODEWITHSUNDEEP
htmlcss
Jonah
Jonah

Reputation: 16222

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:

Floated Image

I know only modern browsers support 2-column layouts, so my questions are:

  1. Can this be done in modern browsers? If so, how? We are essentially doing a "float:both" but ofc that directive doesn't exist....
  2. 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?

Upvotes: 3

Views: 2552

Answers (2)

Rob
Rob

Reputation: 15160

Curvelicious Otherwise known as a ragged float by Eric Meyer.
Also Sandbags

Upvotes: 1

thirtydot
thirtydot

Reputation: 228182

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

Upvotes: 2

Related Questions