tableless layout with image borders

[Griffin80]

I am currently trying to convert an old tabled design to a new CSS tableless design.

The design had a header and footer and in the middle a 3 cell table (middle cell for content and left and right for the borders which contained images.

What is the best way to create left and right borders using div’s and no tables?

With tables i would do this:

<table>
<td>left border image</td>
<td>content</td>
<td>right border image</td>
</table>

I have tried multiple solutions with CSS, but either the div’s overlay each other, or the side border images dont repeat all the way down the page.

Any help would be appreciated.

[noahgelman]

Instead of 2 background images on the sides, use one that goes vertical. Take a horizontal slice of what it’s supposed to look like, set that image as the background to the content, and set it to repeat-y.

[Griffin80]

thanks for your reply mate, this solution would only work with a fixed width though would it not?

problem i am having is that the design is fluid.

[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.

[CraigSnedeker]

They way I do it is like this:

Code:

Code:

#left {float:left; width: 200px;}
#center {float:left; width:200px;}
#right {float: right; width:200px;}

[Author]

Posts