title: Looking for a way to simulate irregularly shaped DIVs
body: <p>I'm developing a website for a designer who is, shall we say, more oriented towards print designs than for the web. Their page design for this site gives me a content area that is irregular. </p>
  
  <p>If this were a hand-coded site I could do the layout (painstakingly) by slicing images and judicious use of floats, absolute positioning, and z-indexes - but the site is being done in Drupal and my content area is what it is (I suppose I could do some serious hacking in node.tpl.php, but even that would be problematic).</p>
  
  <p>Here's what I mean - both header and footer have bits that stick out of them  which extend into the content area:</p>
  
  <pre class="lang-none prettyprint-override"><code>+--------------------------------------------------+
  |                                                  |
  |                LOGO/HEADER AREA                  |
  |                                                  |
  |       +------------------------------------------+
  |       |         HEAD ONE FOR PAGE                |
  |       | Lorem ipsum dolor sit amet, consectetur  |
  |       | adipiscing elit. Praesent in lectus in   |
  +-------+ lectus tempor volutpat vitae velnunc.    |
  | Duis diam sem, mattis in eleifend nec,vulputate  |
  | ac dolor.Aliquam eleifend, mi non adipiscing     |
  | condimentum, erat nunc consectetur lorem, at     |
  | aliquet arcu purus non sapien. Sed in neque eu   |
  | velit venenatis tincidunt vel in est.            |
  |                                                  |
  | Cras fermentum magna non erat pretium suscipit.  |
  | Proin id leo neque. Aliquam vel metus eget       |
  | libero venenatis consectetur. Aliquam      +-----+
  | lobortis lacinia eros vel vulputate.Mauris |     |
  | lorem diam, bibendum et fringilla nec ...  |     |
  +--------------------------------------------+     |
  |                                                  |
  |                 LOGO/FOOTER AREA                 |
  +--------------------------------------------------+
  </code></pre>
  
  <p>Right now my barely workable solution is to put the content-area content into tables, with judicious use of row- and col- spans to avoid the sticking-out areas. Besides being a pain, it  defeats the purpose of using a CMS - the HTML in each page has to be fiddled with by hand to make the table-cells work properly within the page constraints.</p>
  
  <p>So - I guess my question is this: Is there a pure CSS (or even a CSS/Javascript) way to do this without resorting to fragile, error-prone table-coding in every page?</p>
  
  <p>(N.B. I've already told the designer that this is a problem, but the client had already approved the design so, for this project at least, I'm stuck with it)</p>