How to remove line break after DIV in CSS

Question

Is there a way to prevent a line break after a div with css, but to have one div min width and the other max width? For example I have ```

My Label:

My text

``` and want it to display like: ``` My Label: My text ``` Where My text floats right, and my label takes all the remaining width? I am using the following CSS, but the .text div keeps wrapping: ``` div { display: inline-block; } .label { border:1px solid blue; width:100%; } .text { border:1px solid red; float:right; } ``` **UPDATE: JS FIDDLE * http://jsfiddle.net/jPrMG/ Thanks for your help

Accepted Answer

It's not a 'line break' that you're seeing; it's because `

` elements default to being a `block` element. If you want to change the behaviour so that they appear on the same line, you can change the `display` property in CSS, like so: ``` display:inline; ``` or ``` display:inline-block; ``` If you still want to have `width` or `min-width` property (as stated in the question) then you would need the latter of those two, `inline-block`. Hope that helps.

How to remove line break after DIV in CSS

Solution

Problem