CODEWITHSUNDEEP
htmlcss
George Pirkulov
George Pirkulov

Reputation: 83

How to position two elements on the one line in HTML

Here is my problem: enter image description here

I need to put this number over"...".

Here is the HTML code:

<div class=" unread-object">

            <div style="overflow: hidden; text-overflow: ellipsis;">

                <a class="k-link nowrappable outdate-object" href="#/view/19260">
                    л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds 
                </a>


                 <span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206);float:right;">[3]</span>


            </div>
        </div>

float:right and left doesnt work. But, when I stretch fully slider:

enter image description here

Upvotes: 0

Views: 3240

Answers (2)

Roy Sonasish
Roy Sonasish

Reputation: 4599

use display:inline-block

<a class="k-link nowrappable outdate-object" href="#/view/19260" style="display:inline-block;">л ьотрипмасвчувсапмдгбыцячшльогтрнамам ам маугшпгнплрплроsdsds</a>

<span class="unread-count" style="font-weight:normal; font-size:9px; color:rgb(161,187,206); display:inline-block;">[3]</span>

I think this will solve your issue.

jsFiddle Link

Upvotes: 2

artSx
artSx

Reputation: 1620

When the width of the block does not align the two elements, the right will float line.

Simple solution is to use position:absolute;

In my example

I placed position:relative for the second div

<div style="overflow: hidden;position:relative; text-overflow: ellipsis;">

where you have content and the span with unread-count it's placed with position absolute;

.unread-object .unread-count{
   position:absolute;
    right:0px;
    top:0px
}

Upvotes: 1

Related Questions