Problem with auto expanding columns

[designkitt]

I am having problems with a two column layout expanding evenly so they align with the footer. Right now, they expand independent of one another.

Does anyone know how to fix this?

Thanks in advance!

Here's the page url:
http://kittelbergerdesign.com/jcc/secondarypage.html

Here's the css:
http://kittelbergerdesign.com/jcc/secondarypage.css

[Veronica]

Getting columns to have equal height with css, in a way that works for all browsers, is... a challenge. There's a javascript way to do it that you can try. Customize it by adding the names of the divs you want to be equal length

http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/

You can also freate faux columns with images, but that way has limitations. http://alistapart.com/articles/fauxcolumns/

[designkitt]

Veronica I used the java script you suggested and it worked great, at least in IE7 and firefox. Thanks so much!!:)

Then I did the same thing with the home page, slightly different layout, and it's not working here. I think it has something to do with the orange area, which is a div and the image of the kids, another div because it seems to be extending the blue area the width of these divs instead of ending with the yellow column on the left. I designated the blue area div and the yellow column in the js file. I dont know how to correct this, if it can be corrected at all. Any thoughts?

Here's the url for that page:
http://kittelbergerdesign.com/jcc/testindex5.html

and the css:
http://kittelbergerdesign.com/jcc/testchromestyle5.css

[designkitt]

Well I reworked the home page and changed the placement of a few divs which corrected a layout problem, but I still cannot get the columns to expand evenly.

When I put the js file in it expands the light blue div down without changing the content. Without the js file that expansion goes away.

The yellow left column expands with content but is not even with the light blue div with or without the js file.

Going crazy here trying to figure this out. :confused:
I removed an image in the light blue div but that didn't seem to matter.

Please help!!



Here's the new url to reference:
http://kittelbergerdesign.com/jcc/testindex6.html

same css file as referenced earlier

[Veronica]

You would need to create a div that combines the length of the blue and orange/img div, then make the grren area equal to this div in the javascript.

[designkitt]

I made the div that combined the areas you mentioned, orange, img and lt. blue, but when you mentioned that I needed to make this equal in length to the green column, I wasn't sure what to do. Do you mean indicate a height? I tried this and the lt blue area and green column still acted independently when expanded. For the js file I indicated the div that combines orange, img and lt blue, the green column and the lt blue div.

Still doesn't work.:confused: What could I be doing wrong.

[designkitt]

I just noticed that it isnt laying out correctly in IE6, not surprised, but I don't think this is due to the js file.

Is there anyway to get the columns to work without using javascript... just css?

Thanks

[Veronica]

Is there anyway to get the columns to work without using javascript... just css?

Not without re-designing the page, and even then...

Honestly, I would go back to the point where the js was working on the inner pages in IE7 and FF, and then re-design the home page so it works like the inner pages.

The DD javascript works extremely well, including in IE6. If you do the above, and the pages don't work in IE6, it could be something else in your code.