Head scratcher....

want to make a box on a CSS based website that uses images for it's background.

Simple enough! you might say. And normally you'd be right but I want to do something a little more tricky than that.

I want a box with rounded corners so basically a box in three parts.

1. A top with rounded corners.
2. A middle section that will repeat as the content expands the box.
3. A bottom with rounded corners.

I've got an idea of how to get this to work but I wanna run it past you guys cos I've been having some problems.

Here goes:

Code: Select all

    <div id="box">
        <div id="boxtop">
        </div>
        <div id="boxcontent">
            <p>
            Blah blah blah...
            </p>
        </div>
        <div id="boxbottom">
        </div>
    </div>

In the CSS I was gonna make #box be the exact width of the graphics with no padding and no margins. Then.. I was gonna make all divs contained within #box have a 100% width and float left with no margins and background of the co-responding images...#boxtop and #boxbottom would have set height (the exact height of the boxtop and boxbottom images.)

Do you think this would work?

Let me know if you can see any problems with this....

That'll work, but having 100% widths and floats is overkill, do it all minus those two bits and you should be good.

Oh, will this box ever expand in width? If so, your method above won't work, but this would: http://www.alistapart.com/articles/customcorners/

So what do you suggest? Set widths and no floats?

It is never going to expand in width, no. Only in length.

Set a width only on the outer-most div, the rest will expand 100% by default.

Huh... you learn something new every day...

Nice one mate.

Another good reference is Nifty Cube (formerly Nifty corners) and would do a similar thing. Make sure you watch the width and padding here too.