Prevent div from wrapping to next line

Question

I have a list of items, each one has a right aligned part and a left aligned part. The left aligned part should expand freely, but stay underneath the right aligned part without pushing it to the next line

what is happening:

|this is an expanding area of text|
                            |-other stuff-|

what should happen:

|this is an expanding area o|-other stuff-|
                           ^
            the last part of the text is cut off here

right now I am using float: right and float: left but how do I stop them from wrapping? The other stuff is always the same stuff, but is rendered with a different width on different browsers, so I cannot specify exact widths and use overflow: hidden

If you search for fluid layouts with a fixed right sidebar you can find your answer, [without looking too far](http://stackoverflow.com/questions/5195836/2-column-div-layout-right-column-with-fixed-width-left-fluid). Also looking into `white-space: nowrap` in CSS might help. — David, Mar 27 '15 at 23:04

score 1 · Accepted Answer · answered Mar 28 '15 at 00:57

You can achieve this using a combination of overflow and float. This works due to the fact that overflow: hidden establishes a new block formatting context. To paraphrase:

The border box of an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself (in which case the box itself may become narrower due to the floats).

See: http://jsfiddle.net/m8x1g0q8/

Prevent div from wrapping to next line

1 Answers1