A Guide to Overflowing Text Above Divs - Even When the Parent Div has a Width of 0%

My webpage, built with Bootstrap 4, features a row with three divs placed horizontally. The divs have different percentage widths and sometimes the center div's width is set to 0%.

However, I need to ensure that the text within the 0% div is always visible above the other divs. I am facing challenges with: a) Making the text appear on top in all scenarios b) Centering the text so that it equally overflows from the center of the 0% div.

I am looking for a solution that does not involve left/right positioning, as the text width varies.

Here is the code snippet:

<div class="row d-flex">                        
     <div class="float-left bg-info" style="width: 80%;"></div>
     <div class="text-nowrap text-center" style="width: 1%;">32.34 in.</div>    
     <div class="float-right bg-warning" style="width: 19%;"></div>
</div>

For reference, here is a BootPly link: https://www.bootply.com/IurHhOsuf5

Does anyone know how to ensure the text stays on top?

Here is an illustration of the current behavior:

Before

And this is how it is meant to appear:

After

Thank you for any assistance!

cssflexboxbootstrap-4

Answer №1

Have you considered utilizing the Progress Bar component from Bootstrap4?

<div class="container">
  <div class="progress">
    <div class="progress-bar bg-info" role="progress" style="width: 80%;"></div>
    <div class="progress-bar bg-light text-dark align-items-center" role="progress" 
        style="width: 1%; z-index:10;">32.34 in.</div>
    <div class="progress-bar bg-warning" role="progress" style="width: 19%;"></div>
  </div>
</div>

There are a couple of important aspects to consider:

  1. It is necessary to utilize z-index to ensure the text appears on top of the progress bars.
  2. Progress bar's default flex direction is set to column, so in order to center the text, you need to include align-items: center;. Alternatively, you can use the Bootstrap class align-items-center.

https://i.sstatic.net/d2E0R.png

Check out a demo: https://jsfiddle.net/davidliang2008/aq9Laaew/290113/

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 the Header Image on a Page in WordPress

I am currently using the Sunrise Theme from s5themes.com and I have a question regarding the header image on individual pages. It seems that all pages are displaying the same header image as the homepage, which is not what I want. Attached below is a scre ...

csswordpresswordpress-theming

What causes a CSS layout to become misaligned when a line border is added?

After reviewing solutions provided in an answer to a previous question, I attempted to implement a line border within a div nested inside another div. Unfortunately, this implementation caused the div to become distorted. Why did this happen? Markup: &l ...

csshtml

How can I align the middle of the element within its parent until it hits the top-left edge, at which point should I stop center

I am trying to center an element within a parent container. It seems simple with methods like transform, flexbox, and grid... The issue arises with overflow behavior. When the parent container shrinks below the dimensions of the child element, scrollbars a ...

htmlcssscrollbaroverflowcentering

Eliminate the excess space at the bottom of rows in Materialize CSS

Having difficulty adjusting the padding between two rows in materializecss Troubles with Padding https://i.sstatic.net/KFe1w.png Seeking to eliminate the bottom padding. Managed to remove left and right padding with the following code: <div class="c ...

cssmaterial-designmaterialize

Is it possible to adjust the position of a h2 heading on a particular webpage using CSS?

There is a situation where multiple pages contain h elements nested inside a standard container div class. When trying to edit a specific h2 element in a specific page using CSS, simply editing the h2 or the container does not work. Other methods attempte ...

jqueryhtmlcsscontainers

Could you please advise me on where I should apply line-height in order for it to work properly?

My div is structured like this: https://i.sstatic.net/3fUNs.png I am trying to decrease the spacing between the lines. I attempted adding a line-height attribute to both the parent div and one of the label elements like this: <div class="row" ...

htmlcsswhitespaceline-height

Is it possible to toggle all parent targets in Bootstrap?

When trying to showcase my point, I believe it is best demonstrated by visiting Bootstrap documentation at https://getbootstrap.com/docs/4.0/components/collapse/ and viewing the "multiple targets section." In this section, you will find three buttons: togg ...

javascriptcss

JavaScript has the ability to manipulate the width of an element by using methods to both retrieve

I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My ...

javascripthtmlcss

Tips for overlaying text onto a MaterialUI icon

https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...

htmlcssmaterial-ui

The battle between CSS and jQuery: A guide to creating a dynamic zebra-style table without relying on additional plugins

Is there a better way to create a dynamic zebra styling for table rows while still being able to hide certain elements without losing the styling? In this code snippet, I'm using the CSS :nth-of-type(even) to style even rows but running into issues wh ...

javascriptjquerycsshtml

Position the Bootstrap Modal at the start of the designated DIV

When using a Bootstrap Modal to display larger versions of thumbnails in a photo gallery, there can be some challenges. The default behavior of Bootstrap is to position the modal at the top of the viewport, which may work fine in most cases. However, if th ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to apply the active class just once?

I am having an issue with my v-for loop in Vue.js where the bootstrap 4 .active class is repeating. I only want the bootstrap 4 active class to repeat once. Can anyone suggest a solution to this problem? var app = new Vue ({ el: '#app', d ...

vue.jsvuejs2bootstrap-4

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the ...

htmlcssformsavatar

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

htmlcssreactjsnext.jstailwind-css

Creating a water vessel design using CSS

Despite going through the JS tutorial, I still struggle with it and need some assistance. I believe using a jsfiddle would be helpful. I am attempting to use JS to create a small box that changes color from green to empty based on the fullness of a "wate ...

javascriptjquerycss

How to Align Video Alongside Image in HTML without Using CSS

Is there a way to place a video on the left and an image on the right of the same line in HTML without relying on CSS? ...

htmlcssalignment

The horizontal scrollbar is not displaying

(RESOLVED) Currently, I am developing a movie app that displays film titles through an Accordion feature using Bootstrap. Specifically, I have created an Accordion that showcases movies added to a favorites list. The intention is for this favorites secti ...

htmlcssbootstrap-5

Flex columns with flex items of equal height

I am attempting to create a layout where list items within a column have equal heights. Below is my current code: <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> ol { ...

htmlcssflexbox

What is the best way to reduce the spacing between text?

I am trying to figure out how to reduce the spacing between my text so that it aligns like the example below. Take a look at the text "Welcome to my portfolio". Currently, when I run my code, there is a large gap between "Welcome to my" and "Portfolio". ...

htmlcss

How to create a scrollable table using HTML and CSS

I created a Dashboard, but I'm having trouble making my mailPage scrollable. If you have some time to spare, could you please take a look at my website and help me with this issue? Here is my code: window.addEventListener("load", function () { ...

htmlcsshtml-tablescrolloverflow