Home/ Questions/Q 8633553
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T09:30:40+00:00

I have a table that has 3 columns. I use the middle column for

  • 0

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:

http://imageshack.us/a/img571/3016/tableg.jpg

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For design purpose, table have restrictions (this is only my opinion 🙂 ).
    if you stick to your code, then you can use this layout.

    your image should have a minimum width of 1010px (10px border, 990px content, 10px border)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    min-width: 1010px;
    background:url(images/vertical.jpg) top center repeat-y;
    margin:0;
}
.wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 990px;
}
.contenttable{
    width: 990px;
    margin:0;
    padding:0;
}
</style>
</head>
<body>
    <div class="wrapper">
    <table class="contenttable">
        <tr>
        <td>content goes here</td>
        <tr>
    </table>
    </div>
</body>
</html>

    also you cloud try the custom Grid CSS generator from 960.gs

    • 0