CSS: Equal height divs without margin hack

Question

Can you make two divs have equal height without

1) margin hacks because then I can't have a border :

margin-bottom : -500px;
padding-bottom : 500px;

2) Javascript because then there is flicker on the page for non-cached users.

3) Fixed height because then I can't add more content dynamically.

It is for this page http://www.stdicon.com/ for the two divs in the middle (which are currently sized in JS, but I'd prefer a pure CSS solution)

Answer 1

Assuming you don't care about liquidity/zooming, take a 1 pixel high horizontal screenshot of the top most of the pink and light orange, and make it a vertically repeating background that's behind the two divisions.

Answer 2

Maybe the Faux Columns approach can solve your problem:

Faux Columns