Home/ Questions/Q 316473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:23:15+00:00

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd> <html> <head> <style> table {border: 1px solid

  • 0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    <style>
        table {border: 1px solid black; width: 500px}
        .title {height: 40px}
        .close {float: right}
        td {text-align: center; border: 1px solid black} 
    </style>
    </head>

    <body>
     <table>
        <tr>
            <td class="title">  Centered  <span class="close">XXXXX</span>  </td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
    </table>
    </body>
</html>

In this example, the “XXXX” is indeed placed to the right, but this causes the “Centered” text to be offset slightly to the left. This is because the “XXXX” is still taking up space in the document flow next to the text “Centered”. How can I have it so “Centered” is centered exactly like the rest of the table?

heres and example rendering:

rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you absolutely position the span.close, it won’t take up space and your title should be perfectly centered:

    tr td {
  position: relative;
}

tr td span.close {
  position: absolute;
  top: 0;
  right: 0;
}

    Edit Whoops – never encountered that before. Normally a parent with position: relative will act as the coordinate system for a child with position: absolute, but not in the case of a <td>. If you wrap your title and span.close in a <div> with the following code you should be in business:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd">

<html>
<head>
    <style>
        table {border: 1px solid black; width: 500px}  

        .title div {
           position: relative; 
           height: 40px; 
         }            

        td {text-align: center; border: 1px solid black}             

        td span.close {
          position: absolute;
          top: 0;
          right: 0;
        }
    </style>
</head>

<body>
     <table>
        <tr>
            <td class="title">  
              <div>Centered  <span class="close">XXXXX</span></div>  
            </td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
    </table>
</body>

    • 0