CSS Layout-- Make table cell contents appear in row below and set height of parent row/cell

Question

I am modifying a skin for the CKEdit component so that the toolbar is hidden unless clicked. To do so, I moved the toolbar collapser to the row below it using position: relative and top:18px.

My goal is to have the parent tr of the anchor element a height of 2px, but keep the anchor at 11px. Is this possible? I cannot alter the DOM, just the styles.

Here's my reduced code

<style type="text/css">
    table { width: 80px;}
    td { border: solid 1px #ccc; }
    .header  
    {
        background-color: #99f;
        /* This is being ignored */
        height:2px; 
        }
    .below 
    {
        float: right; 
        position: relative;
        top: 18px;
        /*If I shrink,  the BG image goes Away*/
        height: 11px;
        width: 11px;
        background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
        background-position: 4px -1387px;
        border: 1px outset #D3D3D3;
    }
    .hidden { display:none; }

</style>

<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

am reposting new code per the suggestions below. This shows the arrow at the top right of the page now

<style type="text/css">
    table { width: 80px; position:relative;}
    td { border: solid 1px #ccc; }
    .header  
    {
        position: relative;
        background-color: #99f;
        /* This is being ignored */
        height:2px; 
        }
    .below 
    {
        float: right; 
        position: absolute;
        top: 6px;
        right: 2px;
        /*If I shrink,  the BG image goes Away*/
        height: 11px;
        width: 11px;
        background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
        background-position: 4px -1387px;
        border: 1px outset #D3D3D3;
    }
    .hidden { display:none; }

</style>

<br /><br /><br /><br /><br /><br />
<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

Edit (per comments):
If I add a relatively positioned div between the anchor and the cell, I can achieve the results, but again, I can't modify the DOM.

<td class="header">
<div style="position:relative; ">
    <a class="below"><span class="hidden">#</span></a>
</div>
</td>

Answer 1

RTFM my friend :)

@CKeditor, you can set the toolbar to startup hidden like so:

CKEDITOR.replace( 'editor1', {toolbarStartupExpanded : false} );

Hope it helps :)

Answer 2

Try setting .below to position:absolute instead of relative then add left:69px (table width - anchor width).

EDIT

  td { border: solid 1px #ccc; }
.header  
{
    background-color: #99f;
    /* This is being ignored */
    height:2px; 
    position:relative;

    }
.below 
{
    float: right; 
    position: absolute;
    top: 18px;
    left:69px;
    /*If I shrink,  the BG image goes Away*/
    height: 11px;
    width: 11px;
    background-image: url('http://ckeditor.com/apps/ckeditor/3.3/skins/kama/images/sprites.png');
    background-position: 4px -1387px;
    border: 1px outset #D3D3D3;
}
.hidden { display:none; }
table { width: 80px; position:relative; }

and

<table>
<tr><td class="header"><a class="below"><span class="hidden">#</span></a></td></tr>
<tr><td>next row</td></tr>
</table>

Answer 3

Set position:relative on the <table> to make absolute positioning in children relative to it. Then add position:absolute on the <a class="below"> and adjust top and left to your liking. (see example)

table { display:block; position:relative; width:80px; }
.header { width:80px; }
.below {
  float: right; 
  position: absolute;
  top: 6px; right:2px; // adjust as needed
}

With the <a> positioned absolutely you're free to alter the parent <td> height as if it doesn't contain .below

EDIT: For it to work in FF needed to add display:block to the table and duplicate the width in .header (see updated example)