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

Tips for creating a CSS triangle background on a div without relying on borders or images

I have experience creating triangles using CSS borders and images, but this time I want to achieve it using background color. Here is the image of the desired outcome: https://i.stack.imgur.com/qP3yt.jpg If anyone can assist me with this, it would be gre ...

css

Are custom boolean attributes supported in HTML?

When working in HTML5, we have the ability to utilize custom data-* attributes. However, since these are considered attributes, they generally require a string value. Is there a different option within HTML that allows for custom properties, where boolean ...

htmlcustom-data-attribute

Issues encountered with the delete function using distinct row identification format

I am encountering an issue with variable value in input field. To provide some context, I have client information stored in a MySQL database. Using PHP, I retrieve this data and display it in a table. Currently, I am working on implementing a delete optio ...

phphtmlformssql-delete

Tips for styling buttons in react-admin with custom CSS

I need some help with customizing buttons in react-admin. I am new to the platform and unsure about how to go about changing the button CSS for various actions such as create, edit, and export. Can anyone provide guidance on the best way to customize these ...

javascriptcssreactjs

Issue with image magnification on Internet Explorer 9 using the Cloud Zoom plugin extension for Joomla

Recently, I've been utilizing a Joomla plugin called cloud zoom to enhance our gallery by providing an image magnification effect when hovering over the large image. You can see it in action on this link here. While it works flawlessly on most browser ...

javascriptjqueryhtmlinternet-explorer-9zooming

Is there a way to dynamically set the width of a CSS property value in React? I'm looking for a solution that allows for flexibility in adjusting

let sliderVal = avgRound * 20; {sliderVal}% ...

cssreactjs

Font Awesome icons occasionally display as squares, but typically they render correctly

I've noticed a strange issue on my website where the font awesome icons sometimes display as squares instead of their intended design. After searching through forums, it seems that my situation is different from others experiencing similar problems. I ...

cssfont-awesome

Tips for submitting a form with multiple fields that share the same name attribute using ajax:

I have created an HTML form <html> <head></head> <form> <input type="text" name="question[]" /> <input type="text" name="question[]" /> <input type="file" name="image" /> <input type="submit ...

javascriptphpjqueryhtmlajax

Showcasing images in Flask

Hello everyone, I am encountering an issue with displaying images in my HTML file. Currently, I am using Flask within Visual Studio Code and here is the code snippet that I want to display: <img src="/templates/WANG_CHONG_st_1.png" width=" ...

htmlflasktailwind-cssbootstrap-5

<a href> click here to append a new query parameter to the existing ones

Is there a way to create a link that will add a query parameter to the current URL instead of replacing all existing ones? Here's what I'm looking for: If the current URL in the browser is example.com/index.html, clicking on it should lead to ...

javascripthtmlhyperlinkquery-string

Interact with Datatable by clicking on the table cell or any links within the cell

When I am working with the datatable, I want to be able to determine whether a click inside the table was made on a link or a cell. <td> Here is some text - <a href="mylink.html">mylink</a> </td> Here is how I initialize my da ...

javascriptjqueryhtmldatatable

Is it possible to include a div above a centered image?

Currently I am working with ImageFlow and I would like to overlay a div on top of the image when it is clicked, sliding it into the center. I have been looking through the JavaScript file but the function MoveIT() seems to be called multiple times and I am ...

javascriptjqueryhtmlcssimageflow

After extended periods of use, the website experiences frequent crashes

Currently, I am developing a website using a free provider (000webhost) and focusing on integrating a chat feature. To achieve this, I have implemented an interval every 500 milliseconds that reads a file to check for new messages. When a new message is de ...

javascriptajaxwebcrashchat

Learn the trick to making specific words appear bold in Select2 by changing the font style

I'm currently working with select2 version 4.0.1, and I have a requirement to modify the font for specific words. In particular, I want to display codes AK and HI in a different/bolder font style, similar to the example below: <select id="select2" ...

jquerycsshtmljquery-select2

It appears that IE 10 is having trouble displaying modals, possibly due to a compatibility issue with jQuery 1.7.1's animate function

By visiting www.carsense.com and clicking on the login link in the top-right corner, you may notice that the curtain appears but the modal itself does not display, even though it exists: If you locate id="content1" and modify the inline opacity to 1, the ...

jquerycssinternet-explorerinternet-explorer-10

Discovering the previously dropped value from a droppable div

Currently, I am developing a dynamic formula generator using jQuery's drag and drop functionality. Here is what I have accomplished so far: I have two lists: <ul id="head"> <li class="horizontal">Salary</li> <li class="h ...

javascriptjqueryhtmljquery-ui-draggable

Adding a dynamic index from ngFor to an HTML attribute value can be accomplished by incorporating the current

I am using ngFor and I am trying to make an attribute inside the loop change its value by adding the ngFor index. This means that each div created within ngFor will have a unique attribute value. Source: <div class="class1" *ngFor="let item of items; l ...

htmlangular

Exploring the varying treatment of the noscript tag across different web browsers

I've been searching everywhere, but I can't find any information on this topic. What I really want to understand is what browsers do with the content inside a noscript tag when JavaScript is enabled. Let's consider an example: According t ...

javascripthtmlcsscross-browsernoscript

The Typewriter Effect does not appear alongside the heading

For my portfolio website, I am using React to create a unique typewriter effect showcasing some of my hobbies. Currently, the code is set up like this: "I like to" [hobbies] However, I want it to display like this: "I like to" [h ...

javascripthtmlcssreactjs

Exploring the potential of Python loops within Selenium capabilities

My latest project involves scraping data from a search page. Specifically, I need to extract the title, price, and link for each of the 25 results on the page. To achieve this, I'm working with Xpath and utilizing an incremental div number associated ...

pythonhtmlseleniumloopsselenium-webdriver