CODEWITHSUNDEEP
csspositionhtml-tableborder
Tasos
Tasos

Reputation: 1642

Position fixed <td> makes element move

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

Upvotes: 1

Views: 2725

Answers (1)

Mohamed Navas
Mohamed Navas

Reputation: 612

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

Upvotes: 1

Related Questions