css design principles related to rounded corners

I have a basic layout that I'm working on right now (a gif is attached), but I can't figure out the best way to code it.

I know the corners have to be gif images. That's easy enough. What I'm wondering, is whether the top and side sections can be div's with corresponding borders or if I'm going to have to use images all around the center div. I'd really like to use as little bitmap imagery as possible just to get used to working conservatively instead of just laying everything out with images.

I'm still new to CSS layouts, and I've seen some good tutorials, but not much related to escaping the blocky look traditionally associated with them. I know a list apart has a good article on rounded corners, but it didn't seem to apply here.

Thanks for your time

Well, since there are only two curved things on the page, you could cut them into squares and float them in the positions you need using ABSOLUTE positioning with layers. You could also make one tall rectangle, which contains both the rounded top & bottom, assuming that the light blue area isn't supposed to expand. You can't easily draw the curved lines in CSS, so you will have to convert that stuff to GIF files.

just my 2 cents.

Hmm, I didn't think about absolute positioning, lol. I'm still used to the limitations of tables .

On that note, are there any problems associated with absolute positioning? Browser slowdown or anything like that?

Thanks a bunch

the best way to think about tables is:
Tables are for tabular data.
Tables are not for layout.

Here are a couple of sites that may be helpful.

http://www.vertexwerks.com/tests/sidebox/

http://www.albin.net/CSS/roundedCorners/

hth,

gary

I understand what tables are suited for, I was just speaking of the fact that they're seldom absolutely positioned, so I hadn't thought of it.

Thanks for the links, I'll be sure to check them out soon