how to fix height for two div's inside a mail div

page: http://jsbin.com/eniva4/edit

I have one main div: #main-content which contains two div's : #announcement and .tabbed_content

I want both the two divs to have same height, meaning their background color should end at the same height.

Right now notice that #announcement seems to have more height than .tabbed_content

I can hardcode the height pixels value but I want to know if there is a better approach?

Equal height columns are a common problem in site layout. Here's an article that mentions a few solutions:

http://www.ejeliot.com/blog/61

And one more:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

html,body{height:100%;} an browser height wrapping issue http://jsbin.com/eniva4/2/edit