Is there a way for me to get these two boxes to be the same height, without defining the height element in pixels?

http://www.jessweiss.com/tt/index4.html

I'm trying to accomodate flexible font sizes in ems and for the design to not completely break if someone increases the font size on the browser. But if I define the box heights, eventually with the text size changes, the text flows out of the box. I'm talking about the two boxes at the bottom that say "welcome to TrendTrack" and "bill text search". I looked at the faux column model, but I'm not sure if it will work because I don't want the columns to run the entire length of the page. TIA!

Faux columns could work if you add a div in that center area with the background showing the sides of the boxes, but that may not be the best solution.

Have you tried defining the box height in em's ? That would allow it to grow if the text size also grows. Give compliant browsers a height using min-height. You'll have to feed IE6 & below a defined height, but it's default behavior will stretch to hold content regardless of your set size, so it should work.

I now have the whole em height /ie6 hack for min-height going - it actually keeps it from breaking in both ie6 and ie7 in the largest text size available. But if you keep inching up in FF, eventually, while the boxes now stretch, they become different sizes. Any way around that? Thanks!

Part of it may have to do with the full justification - the bigger the text, the fewer words on a line, the more spacing between words. In addition to that, you just have more text in the left box than you do in the right. I don't think there's any way around that.

Yeah, that's what I figured. But a girl can hope, right?? Thanks for your help!!

ETA: I mitigated the problem bit by making one column a lot narrower - gives a few extra steps of increase before the columns become different sizes.