css problem with constant heading

Question

I am trying to have a table header, in a seperate div stay in place while a div undernearth is able to scroll al arge list of records. Both divs are in a div named Layer 3. Hereis the css file I am using:

#Layer3

{

    position:absolute;

    width: 89%;

    height: 40%;

    left: 10%;

    top: 56%;

    background-color: #f1ffff;

}

#Layer3 h1 {

    font-size: medium;

    color: #000033;

    text-decoration: none;

    text-align: center;

}




.tableheader {



}
.tablecontent {

    overflow:auto;

}

and part of the php code I am using to generate the html:

echo '<div id="tableheader" class="tableheader">';

echo "<h1>{$query} Auctions</h1>" . "\n"; 
echo "</div>";
echo '<div id="tablecontent" class="tablecontent">';

echo "<table border='0' width='100%'><tr>" . "\n"; 

echo "<td width='15%'>Seller ID</td>" . "\n"; 

echo "<td width='10%'>Start Date</td>" . "\n"; 

echo "<td width='75%'>Description</td>" . "\n"; 

echo "</tr>\n";

// printing table rows

    foreach ($rows as $row)

    {

        $pk = $row['ARTICLE_NO'];

        echo '<tr>' . "\n"; 

table contens generated in here

        echo '</tr>' . "\n"; 

    }



}

echo "</div>";

I am not sure what I have missed, but tableheader does not seem to be stationary, or even separate from tablecontent.

Answer 1

You've forgotten to close the <table> tag after your main foreach() loop.

Answer 2

div name does not equal div id. #Layer3 is referencing an element with an id of Layer3. Only one element is allowed to have a given id; all ids must be unique.

Don't forget to close your tags (table).

If div#Layer3 is scrolling everything inside it then it has some overflow set. Redefine it to overflow:hidden in the #Layer3 style. You may need to try playing with margins and floats to get things positioned right, but ill leave that to you.

Answer 3

Allow me to pear down your problem to just the bare elements you're interested in. In particular, I'll get rid of all the <div> nodes. Here's your very basic table:

<table>
   <thead class="tableheader">
      <tr>
         <th>Seller ID</th>
         <th>Start Date</th>
         <th>Description</th>
      </tr>
   </thead>
   <tbody class="scrolling">
      <tr>
         <td>28</td><td>25 January 2009</td><td>Hello World!</td>
      </tr>
      <tr> etc. </tr>
   </tbody>
</table>

(Notice the use of the thead element.)

Now here's the style sheet that will produce the scrolling you want:

.tableheader { display:block; }
.scrolling { display:block; height:300px; overflow:auto; width:100% }
th, td { width: 200px } /* first column */
th + th, td + td { width: 240px } /* second column */
th + th + th, td + td + td { width: 316px } /* third column */

Notice that a consequence of setting display:block is that you have to fix the width of columns...