All columns same height - IE 6

[solepixel]

I have a container DIV with 3 other divs inside. The 2 outer divs simply hold a background image, which is the "fixed" by an HTC behavior for IE6. The center div holds the content. The content is what decides the height of the total container. I'm having the hardest time getting the left/right columns to match the height of the center column. It works fine in IE7 and Firefox 2, but I can't get it to work in IE6.

Here's the page:

http://dev5.solepixel.com/pbskids/privacy.html

Any help is much appreciated!

 

[monksnake]

Ok I looked at this for quite a while and from what I'll tell you what I see.

Your .htc file that gets called in crops the bg image on the divs, so that is why there is no repeating of the image. To fix that just make a very tall image of multiple rows of the background png. It also looks as if the right side png does not want to go over to the right, so a way that will work is to make the left and right sides all in one png file, as long as the width is fixed on the yellow box, it should be fine.

Another approach, and this one makes a lot of sense to me is to use .gif files. The only problem is you would need to make a different .gif for each background color the pic can fade into.

<.

 

[Vragabond]

AFAIK, this example requires no .htc and works cross-browser. Have you tried using his technique?

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[solepixel]

I have tried and actually implemented both of the suggestions above and i think maybe 1 or both is repairing the png background images properly, however it's a matter of it stretching with the content in between the 2 divs. I can see IE fixing the pngs and they look to be positioned correctly, they just don't stretch down farther than the height of itself.

Any other ideas?

 

[solepixel]

It appears I am the "closest" when I use:

<img src="img/pbskids_body-left.png" border="0" width="30" height="90" />

Inside the divs. The only problem is of course the "height" value. I guess I could use some javascript height check to adjust the height of the images.

Let me know if anyone comes up with something better.

 

[ChrisHirst]

I did something on setting columns to the same height with javascript (tested in all main browsers for Win & Mac) and a work in progress using IE's conditionals and CSS expressions is at Fixed centre. Fluid Outer (tested in FF 1.5, Opera 7.54 and IE 6)

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[solepixel]

Your first link is almost exactly the method I chose, however, there was no need to check which column was the longest because the 2 side columns were just for looks. The middle column had the content in it, so that's what I used. Thanks for the top though.

 

[traingamer]

See: Faux Columns


Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill