HTML dogleg tables?

I'm trying to recreate an old text in HTML. At one point, the text does something kind of funny: it has two columns of text, and when one column reaches its end, the other column begins spanning the entire page.

Here is a mock example I've created in Paint:

Is there a way to do this with table开发者_JS百科s in HTML? Thanks.

Yes, it is. See: http://jsfiddle.net/minitech/jj7Bh/

It's a bit hard to see the effect with the narrow page size on jsFiddle, but that's how you do it - just set some CSS styles on paragraph #1.

No. You don't want tables, you want css float.

Example CSS:

.container {width:600px}
.inset {float:left; margin:0 20px 20px 0; width:300px}
.standard { }

Example structure:

<div class="container">
    <div class="inset"></div>
    <div class="standard"></div>
</div>

Fiddle

Floating the short paragraph left should do it:

<p id="short-paragraph">Lorem ipsum…</p>
<p id="long-paragraph">Vestibulum…</p>

With the CSS:

#short-paragraph { float: left; width: 40%; padding: 0 2em 2em 0; }

Don't do this with tables. Do it with a floated <p> with a specified width. Here is an example that I just validated in Safari:

<style type="text/css">
.box {
    float: left;
    width: 300px;
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 0px;
    margin-bottom: 10px
}
</style>

<p class="box">
Box of text...
</p>

<p>
This text wraps around the bottom of the other text...
</p>