avoid span float right overlap with text (CSS)

Question

I'm using rickshaw and have a graph hover/annotation where a colour swatch (defined using a <span> is overlapping with text within the <div> that they're both contained in.

Here's my HTML:

<div class="detail" style="left:250px">
    <div class="item active" style="top: 200px"> 
        <span style="background-color: #30c020" class="detail_swatch"></span>
        Very very very very very long label: 67<br/>
        <span style="color:#A0A0A0">Wed, 12 Feb 2014 18:51:01 GMT</span>
    </div>
</div>

and here's my CSS:

.detail {
    position: absolute;
}
.detail .item {
    position: absolute;
    padding: 0.25em;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: white;
    white-space: nowrap;
}
.detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
}
.detail_swatch {
    display: inline-block;
    float: right;
    height: 10px;
    margin: 0 4px 10px 10px;
    width: 10px;
}

The detail_swatch correctly displays in the upper right hand corner, but will overlap the very very ... long label. Most solutions I've read to this problem involve changing the position statement of the containing div. That's not an option.

Is there any way I can ensure the detail_swatch does not overlap the text, and instead expands the div they're contained in (horizontally)?

This code is available on JSFiddle here, which also displays the problem.

Answer 1

You can add a padding-left: 15px; to the .detail .item.active {} to ensure that the item will not be overlapped by text. Then I made the .detail_swatch to be positioned absolute instead of float: right; so it overlaps the padding I added.

Here is the changed css:

.detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    padding-right: 15px;
}
.detail_swatch {
    display: inline-block;
    position: absolute;
    right: 2px;
    height: 10px;
    margin: 0 4px 10px 10px;
    width: 10px;
}

Finally, a fiddle: Demo

Fiddle with very very long text: Demo

Answer 2

If you want the element at a fixed width you could use text-overflow: ellipsis

jsfiddle

.detail .text {
    display: inline-block;
    max-width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Answer 3

The root cause of the issue is that span is an inline elemenent, it is meant to be shown inline. You want the span containing the date to behave like a block-level element, so your choice of element is wrong.

The solution is simple; use a divs instead of span to contain the date and remove the br.