Question

I ran into a small problem with floats that i demonstrate in this fiddle.

I have a DIV which floats to the left, whose width is dynamic (unknown). I have another one that floats to the right in the same block, width dynamic as well.

The problem is that if the width of the first block extends so that it would collide with the right float, the right float will (correctly) drop downwards to make sure no collision is happening. However, i want it to stay on top (vertically, that is – not in terms of z-index).

Basically it seems that the text is prioritized as to “displace” the block on the right side. This should be the other way around, but with the text on the left using up the available space on the topmost line before it even starts to wrap.

I guess the solution is fairly simple. Its just that it doesn’t come to my mind at all and any searches i did didn’t find me what i was looking for.

Answer 1

Float the label div inside the title div, that will wrap the title text around the label regardless of the width of either.

<div class="infoBox">
<div class="inner">
    <div class="entry">
        <div class="title">
        <div class="type">
            LABEL
        </div>
            If this text is longer, the LABEL will drop downwards.
            I would like to have the LABEL float right (as it does here) but also be at the top of the block. 
        </div>
    </div>
</div>

​