Ways to repair an element

Can anyone help me troubleshoot the issue with my count text on a div block? It seems to be affected by changes in screen size.

Normal

https://i.stack.imgur.com/RZkgr.png

On screen resize

https://i.stack.imgur.com/hTdCG.png

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>Archive</h4>
    <a class="watcher" href="/edocs/main/archive/${offnoteType}"></a>
  </div>
</div>

htmlcssweb

Answer №1

If you could provide a functional code next time, it would be easier for us to assist you.

Feel free to check out this solution as well.

In your case, I recommend using position relative and absolute instead of float. This will make it easier to position the "notifications" block consistently in the top right corner of its container.

Remember to set the parent element to position: relative, and the child container to 

position: absolute; right: 0; top: 0;

Adjusting the padding will help you achieve a better design outcome.

Also, consider using semantic HTML tags instead of excessive div elements for improved clarity and structure.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically remove the underline tag from a table cell

Within my HTML, I've inserted the code below for a cell: cell.innerHTML = "<u>View All</u>"; In my onclick event for the cell, I have this code (for example, it's based on a condition where I structure the content as shown below, no ...

jqueryhtml

Is it practical to extract the page type/name from the CSS of the selected tab?

My website has multiple tabs on a single page and I want to integrate Google Analytics code. However, since all the tabs are part of the same page, I need a way to track which tab the user is interacting with. Would using CSS to check for the selected tab ...

javascriptcsswebgoogle-analyticsportlet

The icon on my page is not displaying, and the responsive menu is also not appearing

After tweaking the @media {} settings, I noticed that the icon displays properly when reduced, but disappears completely when fully covered with {}. Additionally, my responsive menu is not visible as expected. `@import url('https://fonts.googleap ...

javascripthtmlcssmedia-queriesfont-awesome

Is there a way to use Media Queries to require CSS to load an image?

Here is the CSS code I am using: html { background: url(../img/header_mobile.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* Smal ...

htmlcssresponsive-design

Show Pictures Side by Side with Captions Below

I need help organizing multiple images in a row with text underneath for my college project. I've been experimenting with some code but haven't had any success yet. <div class="test"> <p> <a href="https://www.facebook.com" ...

htmlcss

Creating an illustration with HTML5 from an image

Is it possible to draw on an image by placing a canvas on top of it? I am familiar with drawing on a canvas, but I am facing an issue where clicking on the image does not trigger the canvas for drawing. How can I resolve this? This is how my HTML looks: ...

javascriptjqueryhtmlhtml5-canvas

Centering multiple nested divs inside a parent div

I am experiencing an issue with center aligning several nested divs inside a container. The contents (nested divs) are not aligning properly within its parent element. <div id="parent"> <span id="menu_0" class="d"></span> <span ...

htmlcsscss-float

Ways to make a div fill the whole screen and allow for scrolling as well

Issue I'm facing an issue with the login.php screen and the addphoto.php screen. I want these screens to cover the entire page, but despite using the following code: .login-screen, .form-screen { position: fixed; top: 0; left: 0; disp ...

htmlcss

The functionality of the disabled button is malfunctioning in the Angular 6 framework

Just starting out with angular 6 and I'm using formControl instead of FormGroup for business reasons. app.component.html <button class="col-sm-12" [disabled]="comittee_Member_Name.invalid && comittee_Member_Number.invalid && c ...

htmlangulartypescriptangular6

Modify the background color of checkboxes without including any text labels

I am looking to customize my checkbox. The common method I usually see for customization is as follows: input[type=checkbox] { display: none; } .my_label { display: inline-block; cursor: pointer; font-size: 13px; margin-right: 15px; ...

javascriptjqueryhtmlcsscheckbox

Manipulate React class names by adding or removing them

Is there a way to toggle a className on click to change the style of a component? I need to rotate an arrow to the right when it's clicked and hide all components next to it using display: none;. I also require this functionality to work when ...

cssreactjsmaterial-uimakestyles

XSLT: Tips for preventing the use of self-closing tags within HTML attributes

I am new to XSLT and I'm currently troubleshooting an issue with some XSLT code (version 2.0) that was written a few years ago. Here is a snippet of the XSLT code: <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" ...

htmlxmlxslttags

Improving the pagination performance in AngularJS

I created an HTML template to showcase member details, along with adding pagination functionality to improve initial load time. Currently, I retrieve 15 members from the server at once and display them, allowing users to navigate through more members using ...

javascriptjqueryhtmlangularjspagination

Bidirectional binding of attributes in an Angular directive

I have developed a custom Angular Directive known as evoEventMirror. Its main purpose is to attach a jQuery event to an inserted element and apply a specified CSS style to the "root" element. Refer to the example below: <div id="#mydiv" evo-event-mirro ...

jquerycssangularjsbindingangularjs-directive

What is the best way to include multiple ng-repeats within a single ng-repeat?

Hey, I'm facing quite a tricky situation with this grid and could use some assistance. I'm trying to figure out how to populate the data using ng-repeat. I've attached an image showcasing the desired layout of the grid and the order in which ...

javascriptangularjstwitter-bootstrapcssangularjs-ng-repeat

Adjust the size of an HTML image for printing using a JavaScript window.print() function

On my website, I have a print option set up where specific elements are hidden using @media. How can I adjust the size of an image within the @media query when my JavaScript print function is triggered? I am able to modify a regular div element easily, but ...

javascriptphphtmlcssimage

Angular Script Linking

Hello there! I am currently attempting to add an HTML tag to my response message, but for some reason it isn't working as expected. Here is a snippet of my controller code (in case the API indicates that the account doesn't exist - see this scr ...

javascripthtmlangularjs

Ways to access nested div children without using identifiers

To customize the width of a specific div using jQuery, I need to target the following structure in my HTML code. Although parts of it are generated by a lightbox plugin, the part that sets it apart is the unique class "xxxgallery": <div class="xxxgalle ...

jqueryhtmlcss

Django just threw a fit, saying 'Cannot assign "u'Wing'": "Truck.MODEL" must be a "MODEL" instance' while trying to add a new object to the database

Database Models: class MODEL(models.Model): ModelName = models.CharField(max_length = 128, unique = True) URL_Slug = models.SlugField(unique = True) ... class Maker(models.Model): maker = models.CharField(max_length = 128, unique = True) ...

pythonhtmldjango

trigger a label click when a button is clicked

I am in need of assistance with simulating a label click when a button is clicked. I attempted to make the label the same size as the button so that when the button is clicked, it would check my checkbox. I then tried using JavaScript to simulate the label ...

javascriptphpjqueryhtmlcss