Please take a look at this jsfiddle...

You'll see I've got everything accurately laid out with the CSS, except for one thing... there's an #inner_body container next to the navigation column in the #body_wrapper. For some reason, the #inner_body is sitting at the bottom of the #body_wrapper and I can't figure out why.

FYI - this is a template I'm working on for a corporate environment. It must be compatible with IE8.

I've tried
Code:
display: inline-block;
and various other things. As you can see,
Code:
display: inline-block;
works for another set of <div>s I have here, but I'm pounding my head trying to figure out this #inner_body container. Obviously, I would need to get it to align with top of the #body_col.

I have tried floating, too... but then everything distorts.


http://jsfiddle.net/jlnewnam/g63jG/


Your advice is greatly appreciated.

-Jared