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

<div class="label">My Label:</div>
<div class="text">My text</div>

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

Answer 1

It's not a 'line break' that you're seeing; it's because <div> 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.