vertical position of wide <table> in 3 column <div> css

[slartybartfast]

I'm new(ish) to css, comfortable using tables, but trying real hard to move away.

Please see http://84.9.125.31/developer/css_test/test5.html

NB This issue is with IE & Opera - I've tried IE 6&7 and both have the same result. It works fine in FF. Thanks to Petr Stanicek for the original example.

As you can see the table is 800px wide in the middle column and it's vertical position is affected by the amount of text in the left or right hand columns - if the table is wider than the middle column, you may need your screen res set to 1024x768. If it's less than the width of the middle <div> the vertical position is fine.

Adding css position:absolute; to the '#left' spec works in that the table is now dispalyed at the correct vertical position in the middle column, see http://84.9.125.31/developer/css_test/test6.html , but the text in the left column flows out below the grid, defeating the object.

Given that there is a solution, the tables used will be any number of columns and could be a lot wider than 800px. I've seen a lot about non-standards compliance and display:table; BUT I'm more interested in the vertical position issue than the width/scrolling.

Any help/pointers would be greafully received.

[drhowarddrfine]

Haven't tested to see if this is affecting it yet but the validator complains that <table> on line 115 is not allowed there.

[slartybartfast]

Haven't tested to see if this is affecting it yet but the validator complains that <table> on line 115 is not allowed there.

Thanks for the quick response, I think this must have been because I had pasted the table inside the <p> tags. I've moved it ouside now and it validates wihtout errors.

Unfortunately this has not fixed the vertical position issues.

[drhowarddrfine]

I have to leave for a while.

I checked in IE7, Opera and FF and they all look the same to me. I don't think I quite understand where the table is to go. Is it to remain under all three columns or constrained to the middle but ride down as the left column expands?

IE has a bug where it expands divs to contain floated elements. FF honors the standard. IE, in general, screws up floats but it's all fixable.

[Greg Hudson]

Your table border doesn't resize in FF. When I shrink the borwser left, the right col data over-writes the table.

I have a simple 3 column design at www.hudsoft.com which doesn't do the same thing as yours (however I haven't converted it to CSS completely yet either).

It MAY be worth a look at least.

Regards, Greg.

[slartybartfast]

I have to leave for a while.

I checked in IE7, Opera and FF and they all look the same to me. I don't think I quite understand where the table is to go. Is it to remain under all three columns or constrained to the middle but ride down as the left column expands?

IE has a bug where it expands divs to contain floated elements. FF honors the standard. IE, in general, screws up floats but it's all fixable.

To recreate the issue, simply click in the hyerplink to populate with longer text in the left (or right) column. The table is moved to exactly below the new height of the left (or right) column, non table text is left unaffected.

NB FF works correctly, the issue is in IE6&7 and Opera.

[slartybartfast]

Your table border doesn't resize in FF. When I shrink the borwser left, the right col data over-writes the table.

I have a simple 3 column design at www.hudsoft.com which doesn't do the same thing as yours (however I haven't converted it to CSS completely yet either).

It MAY be worth a look at least.

Regards, Greg.

Thanks for the feedback Greg! I'm not too concerned about the right column overlapping the table - I'm looking at a solution to the width. The more worrying thing is the 'phantom space' of the vertical position. The www.hudsoft.com site uses a <table> around the whole grid which I was hoping to avoid.

[drhowarddrfine]

I still don't understand the issue. All browsers work the same to me. I did click on the longer and very long links.

[slartybartfast]

I still don't understand the issue. All browsers work the same to me. I did click on the longer and very long links.

Thanks for your persistence drhowarddrfine!
1. I'm probably not explaining myself very well. Pls see below.
2. Your screen res might be higher than 1024x768, so in the first link in my original post, I have changed the <table> to be wider - it's now 1800px. Please try again.

In FF and Safari the table appears directly after the text 'This is content of the MIDDLE column. It can be short, longer or very long. PLS NO GAP AFTER.' in the middle column. This is how I'm trying to get it to appear in IE and Opera.

In IE & Opera the <table> appears with a space above it and the text 'This is content of the MIDDLE column. It can be short, longer or very long. PLS NO GAP AFTER.'

The size of the gap is exactly the same as the depth of the grey box on the left. So when you click the 'short', 'long', or 'very long' hyperlinks in the the grey box, the <table> moves down/up accordingly.

Phew, I hope that explains it better.

[drhowarddrfine]

I see it now and think I have a solution. Be back in a bit.

EDIT: Did you change anything? Since I posted this, I can't get it to break now. So weird.

[slartybartfast]

I see it now and think I have a solution. Be back in a bit.

EDIT: Did you change anything? Since I posted this, I can't get it to break now. So weird.

No, nothing's changed. Just to avoid possible confusion, I'll delete the file in the second link (http://84.9.125.31/developer/css_test/test6.html) which demonstrates position:absolute; I can always put is back again if required. Link in question is http://84.9.125.31/developer/css_test/test5.html

Edit: I just tested again in FF and IE and they still behave (for me) as described.

PS. thanks for the help!

[slartybartfast]

I see it now and think I have a solution. Be back in a bit.

EDIT: Did you change anything? Since I posted this, I can't get it to break now. So weird.

Having seen the issue, pls can you post your thoughts as to a solution. I'm about to start building a tables based solution.

[drhowarddrfine]

Going to tables would be to your determent. I just don't see the problem anymore so I'm questioning whether I ever really did or I just don't understand the issue. All the browsers look the same to me.