CSS: Contain text within a div to dynamically adjust the div's length based on the text content

Check out this code snippet:

View the Fiddle

<div id="main" style="border:1px solid red;">
<div id="child" style="background-color:#68c5e7; width:170px; margin:0 auto; font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat   : no-repeat;">
<span style="padding-left:116px;">9:58</span>
</div>
</div>

This code uses JavaScript to dynamically update the displayed time, which can change the length of the string. The challenge is to adjust the length of the #68c5e7 background color to match the combined length of the image and text.

If you change the time from 9:58 to 10:03, you'll notice that the background color doesn't adjust accordingly. Additionally, the image and text should always be centered within the main div container.

htmlcssmarginpadding

Answer №1

To apply styles, simply add them to the <span> tag and remove the assigned value for width:

HTML markup:

<div id="main">
    <div id="child">
        <span> 123456</span>
    </div>
</div>​

CSS markup:

#main{
    border:1px solid red;
}

#child {
    text-align: center;
}

span{
    /*width:190px; */
    padding-left:114px;
    background-color:#24a5a5;
    margin:0 auto; 
    font-size:30px; 
    background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); 
    background-repeat: no-repeat;
    white-space:nowrap;
    position: relative;
}

View the demonstration

Answer №2

Implement a few modifications:

  1. Delete the width attribute from the parent container
  2. Include text-align:center to the enclosing div element
  3. Change the display property of the container div to inline-block

View example on jsFiddle

HTML

<div id="main" style="border:1px solid red;text-align:center">
<div id="child" style="background-color:#24a5a5;  font-size:30px; background-image:url(https://www.google.by/logos/2012/javelin-2012-sr.png); background-repeat   : no-repeat;display:inline-block;">
    <span style="padding-left:114px;"> 12345678</span>
</div>
</div>​

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

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

Customizing Navigation Color on Laravel Websites for Staging and Live Servers

I am seeking a solution to change the color of the Laravel navigation bar depending on whether it is the live or staging server. Our current setup involves testing code on a staging server before pushing it to the live server in production via Bitbucket. ...

phpcsslaravel

Looking to automatically dismiss a tooltip on mobile devices a few seconds after it's tapped

Here's an anchor tag with a tooltip: <a data-toggle="tooltip" data-original-title="Apologies, pronunciation audio is currently unavailable."> <span class="glyphicon glyphicon-volume-off pronounce"> </span> </a> When v ...

htmlcsstwitter-bootstrap

Separate your HTML code and move it to a different HTML document within Angular CLI

Is there a way to extract my HTML section from the file app.compontent.ts and place it in a separate HTML document? I've tried adding the HTML code directly into the generated class app.component.ts but it doesn't seem to work. I'd also lik ...

htmlangular

"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel

I have developed a sample that functions just as I envision my final outcome to function, with the exception of triggering on mouse-over. Instead, I would like it to activate as a page transition when scrolling with the mouse. (move your cursor over the i ...

javascripthtmlcssmaskclipping

Is it possible to insert an image as the background of a specific word within a paragraph?

I am looking to enhance certain words in a paragraph by adding a brushstroke image in the background, similar to this example: https://i.sstatic.net/KzjGn.png. I attempted to use a simple background for a span, but the image exceeded the padding and was cu ...

cssimagetexthighlight

Button with tooltip for easy access to trigger a modal dialog

My task involves creating a button with a tooltip that displays simple statistical information to the user, such as a student's grades (e.g., "Homework: 100%, Exams: 85%"). Upon clicking the button, a modal should appear with more detailed information ...

htmlaccessibilitybootstrap-5screen-readers

"Utilizing FileReader to seamlessly integrate data into FormData without the risk

Currently, I'm in the process of constructing an ajax file uploader. This is made possible thanks to the recently introduced FormData interface. Everything seems to work as expected when using the original file. However, I encounter issues when conver ...

javascriptajaxhtml

having difficulty showing the primary content page

I'm having trouble displaying a header, side navigation bar, and main content on my page with the code below. Instead of showing anything, I keep getting a parse error: unexpected end of file. What could be causing this issue? <!doctype html> ...

phphtml

Solving the style upload issue with NextJS and Module Federation in ReactJS

My current project utilizes React 18 and webpack 5 with the module federation plugin. I am exploring the possibility of integrating Next JS with module federation, but I am encountering an issue where the host project is not able to fetch styles from the r ...

cssreactjsnext.jswebpack-5webpack-module-federation

Full-width header with scrollable content within the viewport

Is there a way to make the header and footer expand to 100% width while keeping the middle content width variable? You can view the source at http://jsfiddle.net/9dWcZ/ HTML: <div class="header"> this is header </div> <div class="content ...

cssdomlayout

"Preventing scrolling in Safari with CSS overflow:hidden isn't working as expected

Why does overflow: hidden on the body tag not disable scrolling on the page in Safari? It works in Chrome but not in Safari. I'm struggling to find a solution. Can anyone help? ...

cssreactjssafarioverflow

Utilizing Selenium to automatically scroll through a Flickr page in order to capture and retrieve all the

Hey there! I'm currently working on a project to retrieve Flickr public images from a specific group. So far, I've been able to successfully parse the HTML and extract the image hrefs. However, I'm facing a challenge when it comes to retriev ...

pythonhtmlselenium-webdriverpython-requests-html

The Angular 7 template falls short of occupying the entire page

I am currently working on converting an HTML page into my Angular project. While it functions correctly in the HTML version, it does not fill up the entire page when transferred to Angular. You can view an example of this issue on StackBlitz at the followi ...

cssangularangular7

Moving images displayed on a webpage

Is animating 5 pictures/photos a simple task? Take a look at this example: Which programming languages are recommended for achieving this effect? Thank you Tea ...

htmlcss

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

htmlcsstailwind-css

Using JQuery with the latest version of Google Sites is a game-ch

My coding knowledge is very limited, especially beyond VBA. I've hit a roadblock and it seems like I'm overlooking something obvious. What I'm attempting to accomplish: I need this code to be integrated into a New Google Sites page (which h ...

javascriptjqueryhtmlcheckboxgoogle-sites

Combine values in CSS without any spacing

Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which ...

cssless

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one ...

javascriptc#jqueryhtmlajax

What alternative to tables can I utilize that possesses similar attributes?

I have a collection of images all with the same size that I want to use for a slideshow. I would like them to be displayed in a single row, potentially wider than the window itself, and I prefer some of the pictures to extend off the screen rather than wra ...

htmlcsshtml-table