replacing two td tags with divs to align side-by-side

[openandout]

I was hoping to register and respond to this excellent thread:

[webmasterworld.com...]

but your website says "message is too old to respond to" or the equivalent.

I have used the technique described therein to get two td cells to align in a table cell. I have done so with the following markup:

<div style='background: white; color: blue;'>
<span style='float:right; text-align:right;'>
this text aligns right
</span>
<span class='float:left; text-align:left;' >
this text aligns left on the same line
</span>
</div>

then, the two "span" segments are aligned left and right; the right one has to come first, I learned the hard way.

But, this doesn't work when I put a lot of stuff in the left column.
All I want to do, similar to the previous poster, is have 2 columns to replace two td cells.

why doesn't simply replacing the SPAN tags above with DIVs do the requested operation?

at present I am investigating the possibility that the enclosed div's have some conflicting properties with the new alignment I am trying to force them into.

[abbeyvet]

I don't know if what you quote is complete, but divs would be more appropriate than spans here.

I don't know what you mean when you say "this doesn't work" but when you float divs like this you need to fix the width of at least one of them.

Normally I would float them both left, with the one you want actually on the left first in the code. So, you end up with something like this:

<div style='float:left; width:200px;'>
Some text for the left column
</div>
<div style='float:left; width:200px;'>
some text for the right column
</div>

You can set padding, text alignment and so on in whatever way suits your pages.

[openandout]

Yes, DIVs work better than SPANs in this case.

I had DIVs inside the DIV which enclosed the left column, and if I changed those to style='float: left; clear: left; ' then they all aligned left and were listed on top of each other .

Having made that progress, as usual, a new problem has surfaced.

So, the next problem is that if (as is the case with my thingie now) the right colum has only 4 lines and the left column has 100 lines, then after those 4 lines, the left column moves into the right column and it doesn't *maintain its boundary*

so, if in both columns I set a min-width then the right column DOES extend all the way parallel to the left column (which is longer). But, if I specify instead of 'width: 300px' I use 'width: 50%' then it (the short one in this case) is only a tiny square (tested by 'background: gray;' ) and I don't know how to extend it to cover the length of the other column. I am clueless at this point how to proceed.

[abbeyvet]

I really don't understand what you are saying. Can you post the HTML and CSS for the parts of the page that are not working as you want them to?

[rocknbil]

the left column moves into the right column and it doesn't *maintain its boundary*

Look at the major difference between your original and abbeyvet's post: a width was applied to both divs.