[SOLVED] Complex table structure
 

I have a table. It has 3 columns and 4 rows. The 3rd column spans all 4 rows. The 4th row spans the first 2 columns ( holds a single paragrah of running text)

Here's my dilemma...

The text in the 4th row expands below the area where the 3rd, spanned column ends. That makes it look like it is just dangling downward instead of wrapping around the bottom of the 3rd row. I want it to wrap around the empty white space under the end of col. 3 but can't figure out how to do that.

If I use nowrap, the 4th row text bleeds over the bottom of the 3rd columninstead of wrapping (to be expected). If I use colspan=3 (currently at colspan=2) for the 4th row, it also bleeds across the bottom of the 3rd column.

Object code doesn't work (or at least the way I tried it).
Trying to trick it by adding an empty row (to equal out the 4 cols and 4 rows of the span) doesn't work. The now 5th row of paragraph text still bleeds over the 3rd column - just a bit lower than before.

In essence, what I need is a 4th & 5th row grouped with a 3rd column for row 5 only.

I would simply reformat this to make it work for this page, but the page will become a template for a regular, weekly post where the size of the final paragraph of text will vary.

Anyone got any ideas? I'm stumped.

You're right STB, it isn't a virgin ATO question. I just tried to figure it out myself for a few hours yesterday w/o success, and since I see this forum as a kind of family - being that we are all connected by our use of theme and common tasks, I thought there may be someone here with an approach worth exploring.

If it pans out that no one does, or prefers not to respond to a non ATO Qs, I'd absolutely understand. And, to help, here is a visual.

Here's what it looks like now:


-----------------
Here's the same table, with borders, and the proposed "wrap" area color-coded:


I don't think I can do this purely in a table, but I just can't crack the nut for doing it with objects or another way.

Don't feel you have to reply STB. Just wanted to clarify after receiving your response.

Try a table in a table
First table has one row with two columns
First cell is a table with 5 rows each with 2 columns, except the last where the cell spans the two columns

I wanted to thank you Jughead for your suggestion. Surprisingly, your idea was how the current table had been set up... Great minds, and all. :) Alas, it was close but no cigar.

I finally DID figure it out and thought others in a similar situation may be able to utilize this resolve. Bottom-line. I used <div> tags with float attributes around each table, and a single cell table around the whole thing to contain the width of the non-floating, wrapped text at the bottom. Images below show you what I mean:

Demo screenshot - highlighted:
http://vcopia.com/temp/tablefloatsections.jpg

Cyan box = table around entire section
Red area = table with first floating <div> tag.
Yellow area = table with second floating <div> tag.

Sample code below:

This article was great, and helped me put things in prospective: http://www.elated.com/articles/css-floats/


Actual Site Screenshot:

http://vcopia.com/temp/tableFloat.jpg


Thanks again to Jughead and everyone here at Bytes4All for your goodwill and assistance in this matter.