Hi. I'm floating a table to the right. Here's the css:

table.boxtip {
    width: 2.5in;
    float: right;
    clear: both;
    border: none;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: .2in .4in .2in .4in;
    padding: .1in;
    line-height: 1em;
    background: url(images/shadow.png) no-repeat bottom right;
}

table.boxtip td {
    display: block;
    position: relative;
    top: -6px;
    left: -6px;
    border: 1px dashed black;
    background: #d3d3d3;
    width: 2.5in;
    padding: .1in;
}

However, the td content sticks out of the box. (BTW, the relative position is to add a drop-shadow effect. I also tried it w/o that and still fail.) Ideas?

This will happen if the table cell content has a fixed width that is greater than the table cell width. For example, applying "white-space: nowrap" to text.