Re: tableless layout with image borders

[noahgelman]

Yes, absolutely right, it only works on a fixed width. I assumed your content div stretched downward as you have more content. The same theory applies for horizontal as well. Take a vertical slice of your content, set it as the background, position it at the top left and set it to repeat-y.

This wont work if you have some kind of special side (i.e rounded corners or something else that you dont want repeated though the content div.

A second option if this doesnt work for you, is to place 2 divs inside your content div and float them to the sides, and make the background images the sides, like the following.

Code:

and the styling

Code:

#content-left {
background: url([color=#FF0000]your image[/color]) top left no-repeat;
float:left;
}

#content-right {
background: url([color=#FF0000]your other image[/color]) top right no-repeat;
float:right;
}

This also works vertically with some minor changes. And of course, do it the way I showed above is only if you need it to be horizontally fluid.