Creating boxes with rounded corners and fluid dropshadows, both horizontally and vertically, is just about the bane of any web designers life when developing with CSS/XHTML. Once you have found a way that works and is cross-browser compatible you have reached a Zen state.
Okay, well maybe not, but still it's a pretty joyous occasion. I won't belabour the point and the solution is pretty simple, so here is the code, take a glance at the CSS code and I will run you through afterwards:
div.rounded {
float: left;
background:#FFF url("../images/side-left-bgd.jpg");
background-repeat: repeat-y;
background-position: left;
}
div.rounded div {
background: url("../images/bgd-TL.jpg");
background-repeat: no-repeat
background-position: left top;
}
div.rounded div div {
background:url("../images/side-right-bgd.jpg");
background-repeat: repeat-y;
background-position: right;
}
div.rounded div div div {
background:url("../images/bgd-TR.jpg");
background-repeat: no-repeat
background-position: right top;
}
div.rounded div div div div {
background:url("../images/bgd-BR.jpg");
background-repeat: no-repeat;
background-position: right bottom;
}
div.rounded div div div div div {
background:url("../images/bgd-BL.jpg");
background-repeat: no-repeat;
background-position: left bottom;
padding-left: 38px;
padding-right: 38px;
}
As you can see the CSS structure is simple, starting with the initial DIV setup with a class name, in this case "rounded", and then the rules flowing on from there with the redefinition of each DIV's property in turn, cascading down.
The initial DIV always starts with the background, from there you need to build up with borders and shadows, always placing the background behind their respective corners.
Putting this set of CSS rules into XHTML is as follows:
<div class="rounded">
<div>
<div>
<div>
<div>
<div>
Content Here.
</div>
</div>
</div>
</div>
</div>
</div>
Again, super simple, and when rendered, all you really need to worry about is making sure you have enough padding within the final DIV to ensure that none of the text or other content placed inside falls outside the borders of the box graphics.
And so there you have it. One very simple way to putting together completely fluid and flexible boxes in CSS/XHTML of any form, variety, shape or size.
So now you know what to do the sky is the limit, and you can spread forth, dividing and conquering accordingly with trial and error along the way. There is of course a wealth of information out there, and it is certainly worth searching around the web, via Google or elsewhere to find out more. Books I have read on CSS and would personally recommend for some bedtime reading include the following: