Is it posible to top and bottom align two liquid columns

[rockherder]

I have a CSS problem. I'm sorry if this is answer is obvious, but it does have me stumped.

I have 2 liquid columns. One floats left and one floats right. A footer div is below. All are contained in a main div. The left column has an image that must stay connected to the footer div base aligning with the top of the footer.

The left column has a main div with a top div which gets larger or smaller depending on the amount of text and bottom div which contains the image. The right div has a main div which gets larger or smaller depending on the content.

Sometimes the left column is longer that the right column and sometimes the opposite is true. But usually the right column will control the depth.

Is it possible to keep the image in the left column vertically aligned with the top of the footer?

[rockherder]

I did additional research last night and this seems to be something css doesn't support. I can redo this by using nested tables. Everything I read say not to use tables for layout, but I don't see a work around. Any thoughts? Thanks.

[simonuk]

There are solutions but none are what I would call a "perfect solution".

JavaScript can set the heights and have rules so IE obeys it. Personally I hate this solution because it requires the person to have JS active.

I tend to create a background image in the body or container and have it repeating down to make it look like the div without it actually being the div. Again it isn't a great solution but it is one that is easy to setup and is more friendly than most other solutions.

[rockherder]

Thanks

Would you advise against using nested tables. Unfortunately the design requires forcing an image to the bottom which I could do with tables. If all else fails I might be able to get the design revised.

[rocknbil]

Welcome aboard rockherder, have you tried some of the examples in the forum library [webmasterworld.com]? There are two and three column solutions, simple and compact, that should do what you ask, without tables for layout. Give them a try.

[swa66]

Put the image on the container of your columns, manage the backgrounds for both columns there and you'll get it right. Trying to get both columns to be equal length is -unless you use JS or accept fixed heights- a mostly futile effort.

[idfer]

If i understand your problem correctly, you want to position an image directly above the footer but in a way that it appears to be part of the left column? I had a similar problem and i solved it by putting the image inside the footer, then giving it a negative margin equal to the height of the image. You also want to pad the bottom of the left column by the same image height so the content and image don't overlap. I hope this makes sense.

[rockherder]

Thank for all of the response. idfer I think your advice will work for my design. Thanks. I'll try it out tonight.