Question

What is a good way to set up a single container div with some border images surrounding it (in my case only on the left, bottom, and right sides)? I have it centered at the top of the page, overlapping everything else (so like that OSX-style slide-down dialog).

Here’s the basic layout:

Here’s what I’ve got so far (can I avoid a static width/height for the content?):

HTML:

<div class='contentbox'>     <div class='contentbox-wrapper' style='width: 400px'>         <div class='contentbox-mid' style='height: 200px'>             <div class='contentbox-w'></div>             <div class='contentbox-content'>                 Content Box Test             </div>             <div class='contentbox-e'></div>         </div>         <div class='contentbox-bottom'>             <div class='contentbox-sw'></div>             <div class='contentbox-s'></div>             <div class='contentbox-se'></div>         </div>     </div> </div> 

CSS:

.contentbox {     width: 100%;     position: fixed;     z-index: 2; }  .contentbox-wrapper {     width: 300px;     margin-left: auto;     margin-right: auto; }  .contentbox-mid {     height: 100px; }  .contentbox-w {     width: 30px;     height: 100%;     background: transparent url('../../images/contentbox_w.png');     float: left; }  .contentbox-content {     width: auto;     height: 100%;     background: #e8e8e8;     float: left; }  .contentbox-e {     width: 30px;     height: 100%;     background: transparent url('../../images/contentbox_e.png');     float: left; }  .contentbox-bottom {     width: 300px;     height: 30px; }  .contentbox-sw {     width: 30px;     height: 30px;     background: transparent url('../../images/contentbox_sw.png');     float: left; }  .contentbox-s {     height: 30px;     background: transparent url('../../images/contentbox_s.png');     margin-left: 30px;     margin-right: 30px; }  .contentbox-se {     width: 30px;     height: 30px;     background: transparent url('../../images/contentbox_se.png');     float: right;     position: relative;     bottom: 30px; } 

Answer 1

While none of this is recommendable (mixing markup and design), it’s often not the integrator who gets the final word. However, you should still attempt to keep everything as clean as possible.

Your structure is pretty much the only kind of structure you can use to your ends, although if your width is static (300px?), I’d advise you to have your div background as one larger image repeated vertically.

You’d then have a kind of footer within your div, where you could put the two bottom corners and the bottom picture all in one single image. Instead of having 5 divs inside one, you’d only have one. Note that in bigger environment, this also means the user can download 2 more images in parallel (4 max from a single host), making the overall download of the page faster.

This obviously doesn’t work if your width is relative to the parent or can change in any manner though.

---

EDIT: as it happens you specified the width is variable, I don’t think there’s a cleaner light way to do it HTML-wise.

However, if you still want to maximize the speed of download for the images, consider using sprites: the east and west side images can be put inside the same bigger image: the only thing you modify is the background position:

background-position: 32px 0px; /* this should move the background to the right */ 

The advantage is you only need one picture, less connections are needed to download them for the client (faster) and it takes as much place.

Hope this helps.