How can I fix an item

Question

How can I fix my counting text in a div block? There is a problem resizing the screen.

Normal

Resize on screen

The code:

span.right-corner{
  position: relative;  
  float: left; 
  left: 250px;  
  bottom: 25px;  
  width: auto;  
}
div.top-block{
  position: relative; 
  float: left; 
  left: 240px;
  bottom: 40px; 
  width: auto; 
}

<div class="col-sm-4">
  <div class="top-block">
    <div class="huge"><i class="fa fa-book"></i></div>
  </div>
  <div class="well">
    <span class="badge right-corner">${count}</span>
    <h4>і</h4>
    <a class="watcher" href="/edocs/main/archive/${offnoteType}"></a>
  </div>
</div>

Run codeHide result

Answer 1

Next time, please insert a working code so that it is easier for us to help you.

Check out this solution.

Instead of using a float (which I do not recommend ... only for a few specific cases) I think that with relative position and absolute is easier for your case.

Resize and look, the “notifications” block is always in the corner at the top right of its container.

• parent position: relative

• Absolute child container: position: absolute; right: 0; top: 0;

, .

: , html 1048105715 divs;)