Floating DIV in table cell in IE

first fo all, sorry for my english. I am trying to do dragable and resizible table columns in pure Javascript. I inserted inside a cell 2 areas, one for draging (div) and 2nd for resizing (span) like you can see in example bellow. Everything works fine in Chrome and Firefox but not 开发者_JAVA百科in IE8.

Problem is during resizing when div doesn't fit in cell and jump under cell as you can see "Column1" in image. I would suggest property "overflow:hidden" should fix it, but no luck.

CSS:

.ui-column-resizable
{
  float:right;
  height:20px !important;
  display:inline;
  cursor:w-resize;
  position:relative;
  overflow:hidden;
  text-align:center;
  white-space:nowrap;
  background-color:blue;
  margin: -2px -2px -2px 0;
}


.ui-column-draggable
{
  height:17px;
  cursor:move;
  position:relative;
  overflow:hidden;
  background-color:yellow;
  white-space:nowrap;
  text-align:center;
}

JavaScript:

column.innerHTML = "<span class='ui-column-resizable'>&nbsp;</span>" + 
                    "<div class='ui-column-draggable'>" +  
                      column.innerHTML +
                    "</div>";

http://jsfiddle.net/A5kVs/2/

---

This should do it...

HTML:

<td>             
    <div class="drag">
        Column 1
        <div class="resize"></div>
    </div>
</td>

CSS:

.drag {
    position:relative;
    background-color:yellow;
    padding:1px 10px 1px 5px;
    cursor:move;
}

.resize {
    position:absolute;
    background-color:blue;
    right:0;
    width:5px;
    top:0;
    height:100%;
    cursor:w-resize;
}

Live demo: http://jsfiddle.net/simevidas/5mzgP/3/