Simple CSS Scale-Nine Layout

Question

After all these years, I still haven't learned CSS layout, so bear with me. I'm trying to create a container with rounded corners that I generated in Photoshop. The background of the container is white, so I have eight images: top-left-corner, top, top-right-corner, right, bottom-right-corner, bottom, bottom-left-corner, and left.

The edges have a drop shadow around them so yes, I do need 8 sides. How would I lay this out in CSS? I tried and failed miserably to do it with a table + CSS. How would I do it using divs?

EDIT: Simply speaking, how would I lay something out like the pseudo code below

[IMG][IMG WIDTH="100%"][IMG]

If I write this in HTML, my images are split over three lines. How do I get it all to fit on one line?

Answer 1

There are a bunch of ways to do this, http://www.devwebpro.com/25-rounded-corners-techniques-with-css/.

Answer 2

I like the tutorials that have been put together by Matthew James Taylor. These tutorials won't help much with rounded corners, but they are great for CSS layout ideas.

http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths

Answer 3

Check out: Curvy Corners, it's a jQuery plugin that will look at your CSS and find any CSS3 properties for webkit: -webkit-border-radius: 10px; and make any corners with that CSS property round, in every browser.

I use it for IE and it works great! All you have to do is add the .js file to your directory and link it at the bottom of your HTML and it does all the work for you :)