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)

I really don't know enough about this to write an answer, but maybe you could use a combination of interlocked divs for the body (http://stackoverflow.com/questions/1106352/creating-interlocking-irregular-borders-with-css) and sprites for the irregular image shapes (http://www.jaypan.com/blog/css-sprites-irregular-shapes) to get to where you want to be? — Mia Clarke, Apr 01 '11 at 13:52
Possible duplicate of [How can I make a div with irregular shapes with css3 and html5?](http://stackoverflow.com/questions/12126731/how-can-i-make-a-div-with-irregular-shapes-with-css3-and-html5) — TylerH, Jan 20 '17 at 14:41
Other way around - This q was asked, and answered, almost 6 years ago, a year and a half before the other one. — jmarkel, Jan 21 '17 at 16:26

score 2 · Accepted Answer · answered Apr 01 '11 at 14:25

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;
}

I figured there had to be a css solution that covered at least 90% of the problem ... If I stick the extra divs into node.tpl.php it looks like it just might do the trick. Thanks! — jmarkel, Apr 01 '11 at 15:37

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

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?

edited May 23 '17 at 12:16

Community

1
1

answered Apr 01 '11 at 14:21

Marijn van Vliet

5,239
2
33
45

score 0 · Answer 3 · answered Apr 01 '11 at 13:56

The only way You can do this while still having the text wrap is to put images in the 2 corners that stick out. So you have 3 divs one on top of the other with two images in them the first has a float:left the second float:right

The text should be float:left and In the middle of the 2 images in the code

Try it out, it should work I think :)

score 0 · Answer 4 · answered Apr 01 '11 at 14:19

0

Is this about right?

http://jsfiddle.net/hR9ST/

Edit: There is a bit of horizontal scroll, but that shouldn't be hard to fix. I'm working at the minute so I've spent about all the time I can on it for now. :)

answered Apr 01 '11 at 14:19

Chris Sobolewski

12,819
12
63
96

Looking for a way to simulate irregularly shaped DIVs

4 Answers4