Most of the pages on my site are in a 3-column layout. For the pages that needed 2 columns, I'm relying on panels because I didn't have the time to get into the templating files and how to make new template files and use them for only certain type of pages.
My problem is in Zen-based 3-column layout, the middle content
<div> has a 515 pixels width. The total width of the big centered wrapper is 960 pixels. The
<div>s that hold it are "#content" and "#content-inner." These
<div>s are squeezing my 2-column panels in Internet Explorer.
I realize this problem is mainly due to my lame workaround and poor understanding of how CSS truly works, rather than Internet Explorer. What I did basically is a
<div> of which "#content-inner" is the parent, and I made it 960-pixel wide; so Chrome and Firefox will "understand" me, and prioritize that child-
<div> that is generated by Panels and have it be 960-pixel wide.
Internet Explorer won't do this for me. Bummer. Yet, I don't know how to go about solving this without having to rebuild everything.