Home › Blogs › orson's blog

CSS boxes

CSS boxes

Sun, 04/27/2008 - 14:39 — orson

The simplicity of a css technique by Ryan Thrash about Rounded Corners for CSS Boxes appealed to me. This technique uses a single image to build all four corners of a box. It's a bit like using a piece of wrapping paper to wrap a gift. The paper overlaps a bit as you fold it over, but as long as it is big enough it works fine. Sure it is a little inefficient; the full image file size is bigger than the optimized and sliced-up background images would be, but since it's cached by the browser it only has to load once.

But that fixed size did cramp my style eventually. I wanted to make boxes around content which could expand vertically as much as needed with no worries that I'd run out of wrapping paper. So I made a modification to allow boxes of arbitrary height. It required another image which would repeat in the middle section, and two more html element 'hooks': I opted to add a right body div and a footer div. The general patten is that the outer divs hold the right side of the background and the interior divs hold the left side. The code looks like this:

  1. .cssbox, .cssbox_head, .cssbox_head h3, .cssbox_footer {
  2. 	background: transparent url(images/cssbox.png) no-repeat top right;
  3. }
  4. .cssbox_bodyL, .cssbox_bodyR {
  5. 	background: transparent url(images/cssbox_stretch.png) repeat-y right;
  6. }
  7. .cssbox {
  8. 	width: 535px !important; /*intended total box width - padding-right(next)  */
  9. 	width: 550px; /* IE Win = width - padding  */
  10. 	padding-right: 15px; /* the gap on the right edge of the image (not content padding) */ 
  11. 	margin: 0px auto 5px auto; /* use to position the box */
  12. }
  13.  /* set the top-right corner */
  14. .cssbox_head {
  15. 	background-position: top right;
  16. 	margin-right: -15px; /* pull the right image over on top of border */
  17. 	padding-right: 320px; /* right-image-gap + right-inside padding */
  18. }
  19.  /* set the top-left corner */
  20. .cssbox_head h2 {
  21. 	background-position: top left;
  22. 	margin: 0; /* reset main site styles*/
  23. 	padding: 6px 0pt 12px 6px; /* padding-left = image gap + interior padding ... no padding-right */
  24. 	height: auto !important;
  25. 	height: 1%; /* IE Holly Hack */
  26. }
  27.  /* set the right side */
  28. .cssbox_bodyR {
  29. 	margin-right: -15px;
  30. }
  31.  /* set the left side */
  32. .cssbox_bodyL {
  33. 	background-position: left;
  34. 	padding: 0 10px 12px 10px;  /*compensate for the footer slideup*/
  35. 	margin: 0px 15px 0 0;
  36. }
  37.  /* set the lower-left corner */
  38. #cssbox_footer {
  39. 	background-position: bottom left;
  40. 	margin-right: 25px; /* interior-padding right */
  41. 	padding: 0 0px 15px 0px; /* mirror .boxstyleA_head right/left */
  42. }