I have a table that has 3 columns. I use the middle column for the content and the other 2 have an image that act as a border like so:
border --> ||HEADER || <--- border
||NAV ||
||CONTENT ||
|| ||
||FOOTER ||
I have to use position fixed so that the borders do not move when the page scrolls, here is my code:
<td style="background-image:url(images/vertical.jpg); width:10px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed;"></td>
The problem is that when using fixed position my border image moves inside the main content which messes my layout. Weird thing is that this only happen for the Left td. My main content has a fixed width of 990px.
Any ideas?
Screenshot displaying the issue: