Looking for a way to simulate irregularly shaped DIVs

Question

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.

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).

Here's what I mean - both header and footer have bits that stick out of them which extend into the content area:

+--------------------------------------------------+
|                                                  |
|                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                 |
+--------------------------------------------------+

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.

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?

(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)

Answer 1

Hey! what about a solution like this? http://jsfiddle.net/steweb/H7s2P/

You'd 'just' need to split content paragraphs. Top one take care of header 'effect', the bottom one take care of footer 'effect' (through 'float' and margin adjustment tricks) :)

Markup:

<div id="wrapper">
    <div id="header">LOGO/HEADER AREA</div>
    <div id="content">
        <div id="piece-of-header"></div>
        <p id="top">
        HEAD ONE FOR PAGE <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis lorem. Fusce sit amet purus non nulla fringilla sollicitudin. Donec ultrices, nulla ac tincidunt faucibus, odio arcu pellentesque lectus, sit amet bibendum risus velit suscipit odio. Nulla facilisi. In scelerisque auctor orci, eu volutpat risus vulputate sit amet. Mauris dictum blandit fringilla. In et ante quis quam molestie consequat vehicula vitae ligula. Quisque ultricies volutpat lectus, eget accumsan diam malesuada eu. Fusce nec tellus magna. Phasellus at sem eget lectus varius vestibulum. Phasellus sodales aliquet lectus et feugiat. Curabitur mi nulla, vehicula sed dictum ut, dapibus ut sem. Fusce at tortor at augue tincidunt viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitot viverra. Aliquam aliquam porttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapien risus eleifend urna, sed posuere er
        </p>
        <div id="piece-of-footer"></div>
        <p id="bottom">
         rttitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapittitor est pharetra accumsan. Nunc porttitor, enim et blandit placerat, sapienus eleifend urna, sed posuere er
        </p>
    </div>    
    <div id="footer">LOGO/FOOTER AREA</div>    
</div>

css:

#wrapper{
    width:400px;
    margin:0 auto;
}
#header, #footer{
    padding:20px;
    text-align:center;
    background:#BEBEBE;
}
#content{
    overflow:hidden
}
#content p#top{
    padding-top:10px;
}
#content p#bottom{
    padding-bottom:10px;
}
#piece-of-header{
    width:70px;
    height:70px;
    float:left;
    margin:0 20px 10px 0;
    background:#BEBEBE;
    clear:both;
}
#piece-of-footer{
    margin:12px 0px 0px 10px;
    width:70px;
    height:70px;
    float:right;
    background:#BEBEBE;
}

Answer 2

The top part is easy, just end your header block with an empty div that floats left. The text of the content block will wrap around it.

Check for instance this fiddle: http://jsfiddle.net/rodin/kcpbz/

For the bottom part, you're basically screwed, as discussed previously: How can I wrap text around a bottom-right div?