mbratiuk mbratiuk - 6 months ago 16
CSS Question

How I can fix element

How I can fix my count text on div block? There is a problem when you change the screen size.

Normal

enter image description here

On screen resize

enter image description here

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>




Answer

next time please paste a working code to be easier for us to try help you.

Check this solution

Instead of use float ( which i don't recommend... just for a few particular case ) I think with position relative and absolute is easier for your case.

Resize and see, the "notifications" block is always in the corner top, right of his container.

  • parent position: relative

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

Now you just have to play with padding to achieve a good design.

Tip: gonna be better for you if use semantic html instead of 1048105715 divs ;)