CODEWITHSUNDEEP
css
alias51
alias51

Reputation: 8608

How to remove line break after DIV in CSS

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

Upvotes: 22

Views: 95930

Answers (2)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

You can use CSS table model:

.label {
    border:1px solid blue;
    display: table-cell;
    width: 100%;
}

.text {
    border:1px solid red;
    display: table-cell;
    white-space: nowrap;
}

Fiddle

Upvotes: 14

Spudley
Spudley

Reputation: 168685

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.

Upvotes: 34

Related Questions