How to make text wrap around a table, as if it were an image

Soren Wagner picture Soren Wagner · May 20, 2012 · Viewed 26.9k times · Source

I'm surprised I couldn't find a solution to this. I would like to position a small table (1 row, 3 cells,) near the top of my document, aligned to the right, with a paragraph wrapping around it, just as you can do with an image with the following code...

    <img src="http://www.sorenwagner.ws/marty/img/ca-seal.jpg"
        align="right" width="300" height="100">
    This is a paragraph large enough to wrap around the image...
    This is a paragraph large enough to wrap around the image...
    This is a paragraph large enough to wrap around the image...
    This is a paragraph large enough to wrap around the image...

It would be nice as well to be able to define padding around the table, so the text is not right up to the border. Is there a relatively simple solution for this in CSS?

Answer

mu is too short picture mu is too short · May 20, 2012

Just float the table to the right (which is how you should be positioning the image as well):

<table style="float: right">
    <!-- ... -->
</table>
<p>Bunch of text...</p>

Demo: http://jsfiddle.net/ambiguous/ZLfg7/1/