Equal Height Columns w/Borders

[BeccaT]

In attempting an alternate pre-publish site design I am looking to implement equal height divs. Wanted to do it with CSS only but it seems because I want to include a border going that route becomes a bit complicated if at all possible. I decided to give jQuery a try but now I'm running into text overflow problems. I'm thinking it may have to do with the fact I'm using tabs vs standard nav links for content change of one of the divs.

http://streamlinemac.com/test29w/index.html << Original design
http://streamlinemac.com/test29w4/index.html << Updated design. Left column overflow problem.

I have noticed many noting the jQuery option for equal height columns runs into the problem of not resizing dynamically without refreshing the page. Due to this and the fact that my use of tabs means there is no page refresh nor can I manually refresh without full circling back to the "Home" tab has me stuck. In the meanwhile I've tried different overflow and height options for associated divs all to no avail, figured it's time to ask for help before I dirty up my HTML and CSS too badly.

Any assistance would be appreciated in massaging jQuery or all together moving to something different. As you can see I'm not a web designer and simply doing this as a favor for a friend so please excuse my mark-up and coding foibles unless they are the cause of current woes.

[TheGAME1264]

Have you tried the faux columns approach?

In your case, you'd have to get trickier with it, though. You'd create a top background which would consist of your top borders, the middle background which would be your middle borders/columns, and then the bottom background which would be your bottom borders.

In other words, it's doable, but you'll have to get a little bit funky with it. I used to have a working example of this, but I don't anymore.

[BeccaT]

Appreciate for the reply TheGAME1264!

Yeah, got excited when I first saw and considered faux columns but since this is a responsive design I could not think of a way to make it doable. It's really the need for those darn borders causing the problems.

After fiddling I believe I've come up with a workable solution albeit not perfect but a decent compromise. Gave "container.main" the blue background while applying white and a min-height value to the "main_l" column. We won't have the double center borders with 3px gap but we would have pseudo dynamic height. http://streamlinemac.com/test29w6/index.html

All the above is moot anyhow as they just informed me they like an earlier design. Best of all it's basically complete and simply awaiting their content. http://streamlinemac.com/test29f/index.html

Thanks again!