确保float：right元素垂直对齐到顶部，即使在float：left元素旁边也是如此

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

You might want to try using css tables/ Just create both elements and make it a table, then make your right and left elements table-cells:

#wrapper {
  display: table;
  width: 100%;
}
#leftside, #rightside {
  display: table-cell;
  width: 50%; /* Both sides will be rendered on one line */
  vertical-align: top;
}
/* Position elements within the cell */
#leftside { text-align: left; }
#rightside { text-align: right; }
#leftside > div, #rightside > div {
  display: inline-block;
  text-align: left; /* Reset text alignment */
}

Explanation: The table structure will keep the elements in one line with width 50%; The inner elements (divs in this case) will be inline-blocks so that they can be aligned left or right. Now when one of the inner divs exceeds the max width of 50% it will just make the other 'cell' side smaller

Answer 2

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>

​