View Full Version : Text wrap around centered img

martin the 3rd
05-22-2005, 05:37 AM
Before I begin, I just want to say that this is purely theoretical, and is not really needed for anything at the moment.

A friend of mine and I (while taking a webdesign course together about a year ago), were trying to figure out how to get text to wrap around an image that is centered on the page. We were ahead of everyone in class, so we spent some of our extra time working on this :p. Basically what we were trying to acheive would be the result of float:center (if it existed).

We thought of a few ways, none very satisfying. The first was to use a Table, with the top row having a colspan of 3, the middle row three seperate td's, and the bottom also having a colspan of 3. It centers the image, but if sizes arent perfect, it's very impractical and fairly useless in designing websites.

Another was to basically construct the same thing, only using div containers. Again, this split up the text, and made it realllly hard to integrate with any kind of layout (unless all of the surrounding divs were inside a larger "content" div)

A thought (untested because it seemed fairly obvious it wouldnt work) was to somehow have text that would overlap the space created by a margin-left: auto, and margin-right: auto. A variation of this is to center the image, and make a layer of div's with a higher z-index value than that of the image. Then you could simply add A large number of &nbsp's where you wanted the image to appear. Once again, a pretty big hassle, hard to integrate, and the code looks really cluttered because of all the &nbsp's everywhere you turn.

We were thinking that maybe a future version of CSS would have a float:center attribute, but it would require a whole lot of attributes to work properly.

Any ways to do this without all the hassle of the aforementioned possibilies?


05-22-2005, 06:23 AM
There was a pretty controversial article at A List Apart (http://alistapart.com/articles/crosscolumn/) not that long ago about this... the consensus seemed to be that it a) was a design trick that worked well in print, but not in web, and b) involved way too many non-semantic elements to justify.

Myself, I'd like it if there was a "position: absolute" that wasn't out of flow, but sort of pushed elements away, like a stone in water.