avoid span float right overlap with text (CSS)

css, css-float, html, rickshaw

Solution

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

Problem

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.

Original source