CODEWITHSUNDEEP
css
Cekk
Cekk

Reputation: 159

CSS how to keep text always inline with a paragraph

I have a block of text with unknown width and I would like to place another text right after it that would always stick to the last word. If the first block is one line then setting them both to 'inline' or 'inline-block' is enough, but if the first block is more than one line, the second block always goes to the next line.

Code:

html

<div id="text">sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis.</div>
<div id="new">New</div>

css

div {
    float: left;
    display: inline-block;
}

http://jsfiddle.net/nmuUd/1/

'New' needs to always stick to the last word of the previous block. How can I do this?

EDIT: To clarify, I cannot change the markup. The content is always in two separate divs.

Upvotes: 0

Views: 8380

Answers (6)

Kiero
Kiero

Reputation: 152

Your text is pushed down because if you have an 'inline-block' element, and the text is long enough to fill 100% width of a parent container the second line will also have 100% width. That's why the second div will start rendering below that first div. If you want your divs in one line you have to give them 'display: inline;' property.

If it's a static and short text, for example name of an author, you can use pseudo-element ':after', like this:

div.text:after{
    content: ' put you text here'; /*remember to put whitespace on the beginning*/
    background-color: red;
}

but if you want to use 'div' as inline element just use 'display: inline;' without float:

div.text{
    display: inline;
}

Hope I helped.

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

demo

css

#new {
    background: red;

}

div {

    display: inline-block;
}

Upvotes: 0

Amit
Amit

Reputation: 2565

fiddle

you can make use of span

<span id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. </span>
    <span id="new">New</span>

Upvotes: 0

cjdcordeiro
cjdcordeiro

Reputation: 711

Like this:

html

<div id="text"> sit amet, consectetur adipiscing elit. Donec facilisis eros arcu, sed dictum lorem consequat a. Duis sodales rhoncus felis at convallis. 
<div id="new">New</div></div>

css

#new {
    background: red;
}

div {
    display: inline;
}

Upvotes: 2

Stephan Muller
Stephan Muller

Reputation: 27600

Just remove the float, if the two divs are display: inline that should be enough.

Upvotes: 0

Ermir
Ermir

Reputation: 1451

Getting rid of the float:left; on your fiddle seems to do what you're looking for.

Upvotes: 1

Related Questions