The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS tableless layout with image borders Re: tableless layout with image borders


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.


and the styling

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

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

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.