Tips on aligning a span inside a div to the right and ensuring the text is responsive

I want to enhance my bar designing skills. I managed to create one, but I'm facing some issues.

How can I make this span align to the right? I tried using float but it didn't work. Any suggestions? Also, when I try to shrink the screen, the text becomes too small.

* {box-sizing: border-box}

.flex {
display: flex;
    margin-bottom: 10pt;
}

.bar { 
width: 100%;
    background-color: #ccc;
    line-height: 18pt;
}

.fill {
 background-color: #7ef57e;
}

.tag {
text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    width: 25%;
    background-color: #00A1A7;
    font-size: 2vw;
    float: left;
    padding-left: 1%;
}

span.value {
    float: right;
    font-size: 2vw;
    z-index: 1;
    
}
<body>
  <div class="bar flex">
  <div class="bar fill" style="width: 75%">
    <div class="tag">Javascript</div>
    </div>
    <span class="value">75%</span>
  </div> 

</body>

htmlcssresponsive-designposition

Answer №1

To ensure the div fills up 75% of the space, you can set its width to 75% and allocate the remaining 25% for the span tag. Align the text within the span to the right using text-align: right. Here is an example showcasing this:

* {
    box-sizing: border-box
}

.flex {
    display: flex;
    margin-bottom: 10pt;
}

.bar { 
    width: 100%;
    background-color: #ccc;
    line-height: 18pt;
}

.fill {
    background-color: #7ef57e;
}

.tag {
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    width: 25%;
    background-color: #00A1A7;
    font-size: 2vw;
    float: left;
    padding-left: 1%;
}

span.value {
    text-align: right;
    width: 25%;
    font-size: 2vw;
    z-index: 1;
}
<body>
  <div class="bar flex">
    <div class="bar fill" style="width: 75%">
      <div class="tag">Javascript</div>
    </div>
    <span class="value">75%</span>
  </div> 
</body>

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

Switch up the box-shadow color with ColorThief!

Is there a way to adjust this script to change the box-shadow color of #player1? <script type="text/javascript> $(window).ready(function(){ var sourceImage = document.getElementById("art"); var colorThief = new ColorThief(); var color = ...

javascriptcss

Incorporating a unique font into your SAPUI5 application

While experimenting with an expense app design, I decided to incorporate a receipt-like font for a unique look and feel. After discovering the FakeReceipt font, I placed my woff and woff2 files in the same directory as my style.css file, and it worked like ...

csssapui5custom-font

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

I'm experiencing slow loading times on my website and I'm looking to implement a loader that will hide the page until all elements are fully loaded. I've tested several loaders, but they all seem to briefly display the page before the loader ...

javascriptjqueryhtmlperformancegoogle-chrome

What can I do to remove the hidden <p> tags that Wordpress is inserting into my HTML code?

There seems to be some extra space appearing between my divs (inside a main div) that is possibly due to unexpected <p> and </p> tags being added by WordPress. This issue is quite common with WP, but the problematic tags are hidden so I am unab ...

htmlcsswordpress

Creating a responsive web design with a user-friendly CSS grid layout

Currently, I am delving into the realm of CSS grid to better comprehend its functionality. In my layout design, there are two menus (colored in red) positioned on either side of a central main content box (colored in blue). As the screen size reduces and ...

htmlcssgridgrid-layoutcss-grid

Does CSS include a shadow child operator?

Did you know that Google Chrome has a special feature called the shadow descendant combinator /deep/? This unique combinator allows for the selection of elements within shadow nodes. body div {...} // this doesn't target descendant divs inside shadow ...

cssgoogle-chromecss-selectorsshadow-dom

Ways in t4 templates to generate HTML output

I have a complex t4 text template that generates HTML code. This is what the t4 template looks like: <#@ template language="C#" debug="true" #> <#@ assembly name="System.Core" #> <#@ import namespace="System" #> <#@ import namespace= ...

c#htmlcode-generationt4

Traverse Through Every Column of an HTML Table and Retrieve the Information with jQuery

Trying to extract data from within the <tbody> tags in an HTML table. The structure of each row is as follows: <tbody> <tr> <td>63</td> &l ...

jqueryhtmlloopsforeach

The dropdown feature within a bootstrap button group is malfunctioning

As part of the web track in cs50, I am working on creating a webpage. My goal is to include options for navigating to the next or previous pages, as well as a dropdown menu with all the pages in between. However, when using Bootstrap's code, the dropd ...

htmlcssbootstrap-4cs50

Steps for sending data to a modal window

Consider this scenario: I have a function that retrieves some ids, and I utilize the following code to delete the corresponding posts: onClick={() => { Delete(idvalue[i]) }} Nevertheless, I am in need of a modal confirmation before proceeding with the ...

javascripthtmlarraysreactjsbootstrap-modal

Error 404: Django is unable to locate the static/css files

This particular issue appears to be quite widespread, but existing Q&A resources are outdated and do not address my specific problem. Currently, with Django 2.0.2, my basic webpage is failing to render the bootstrap.css file simply because it cannot locat ...

pythoncssdjangostatic

What is the best way to extract a JSON value and use it across multiple functions?

Currently, everything seems to be working fine. However, I'm unsure about the correct way to call the json data. I attempted using a direct link but it didn't work. Do I need to modify the "data" parameters? I'm confused because I saw that ...

javascriptjqueryhtmljsonfunction

Exploring HTML list with padding to determine optimal wrapping configurations

Having an issue with a section of links. The blocks for the links are lining up next to each other when the viewport is wide, but I want one block labeled MOBOT to drop down onto a new line in a small responsive space. The goal is for the MOBOT square to ...

htmlcsshtml-lists

When the getImageData event is triggered upon loading

Hello, I have a script that identifies transparent and non-transparent pixels. Currently, the result is displayed from a 100px by 100px rectangle on mouseover: var data = ctx.getImageData(100,100, canvas.width, canvas.height).data; During mouseover, it s ...

javascripthtmlcssoopecmascript-5

The sub-menu positioning feature functions properly in Chrome and Safari, but is not compatible with Internet Explorer and Firefox

Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...

htmlcssmenunavigationsubmenu

Anomaly in Form Validation with Semantic-UI

This time around, I am implementing Semantic-UI with React. In the past, I have successfully utilized Semantic-UI's form and form validation features in various projects without encountering any issues. However, a new problem has arisen, which I will ...

javascriptjquerycsssemantic-ui

Images of varying sizes aligned at the bottom of cards, organized in rows with pure CSS styling

I am working on a layout that involves a container with "cards": images positioned above with related text below. Here's an example: <div class = "cards"> <div class = "card"> <div class = "image-wrap"> <img src= "im ...

htmlcssflexboxcss-grid

Position the larger element in the center of the smaller container element

Is there a way to center an image without it covering up the paragraph below? Using position: absolute; or float: left; can lead to layout issues. <p>This is the first paragraph</p> <p><img src="http://placekitten.com/600/280"/>&l ...

htmlcss

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...

javahtmlselenium-webdriver

Issue with dragging and styling windows in Safari on iOS

When checking my website on Safari using an iPad or iPhone, I noticed that I can touch and drag left to right, causing the entire window to move and reveal the grey background behind it. Here is a link to my page. However, when visiting other websites, no ...

htmlcssios