border on 3-col layout

[rjsquire]

I am having a problem getting some borders on a page. I have one way to do it, but was wondering if there was a more elegant solution.

I have the following page layout:

http://theklassifieds.com/tkPage2.html

Basically, a friend of mine is using this template and it is a combination of Paul O'B and Doug Livingstones methods.

I am trying to get a border on the left side of the right column and the right side of the left column.

Since the left and right column are essentially defined by the borders of the containing div, that may cause problems. I tried applying borders to both the left and right columns, as well as the center, but nothing seems to work.

I am not sure if the negative margins are causing problems or not. Even if I get a border to work it does not fill down.

I figure I can repeat an image I the y direction to fill down each column and effectively create a border.

Is there a better way to do this???

Thanks…Rob

[Paul O'B]

Hi,

The problem with dougs method of using the borders for the columns is that you can't then put a border on it.

With my method you can border the columns but you can only get 2 colours for the three columns.

If you are going to use a bg gif to get the borders then you may as well use the bg gif to colour both columns and do away with the negative margin floats altogether.

Heres an example.

http://www.pmob.co.uk/temp/3columnflexibleheader.htm

Feel free to borrow the code.

Paul

[Paul O'B]

I figure I can repeat an image I the y direction to fill down each column and effectively create a border.

No you can't do this as the columns are not 100% height. You need to repeat the bg on the body for one column and on the main outer for the other column. These are the only 2 places where you get 100% height.

You won't be able to do this on the layout you have because your outer has 150px border which will offset the background and make it wrong.

You'll need to do it as in my link above without the negative column floats.

Hope this all makes sense - its quite straight forward really

Paul

[rjsquire]

Paul:
Thanks a lot.

Hope this all makes sense - its quite straight forward really

It does all make sense now. And it's much more straight forward now that you've explained it.

One more question unrelated to this: Is there a way to make vertical text that's cross browser? I can make it work in IE with a class like this:

.xaxislabel {
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 10px;
 	writing-mode: tb-rl; 
 	filter: flipv fliph;
 }

But that doesn't have any effect on mozilla.

Thanks again:
Rob

[Paul O'B]

Hi,

No it only works in IE 5.5+ AFAIK.

You'll have to find a script for other browsers (or an image etc).

Paul

[rjsquire]

DRAT. That's what I was afraid of.

Thanks again