Position text dynamically within, to the right, or to the left of an element

As a CSS beginner, I am seeking advice on how to properly position the text in a Gantt chart. Currently, all the text is within the bar and wrapping occurs as the bar narrows. I am looking for a solution to have the text aligned either left or right of the colored gantt bar to maintain a clean display.

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

The desired outcome is to have the text for Step 1 on the right side of the bar, while the text for Step 5 on the left. Any additional text should follow suit, adjusting based on space availability to prevent wrapping.

<div style="background-color:green;
padding:10px;
margin-top:-10px;
width:10%;
margin-left:%;
border-radius: 10px;
color:white;
text-align:center;
font-weight:bold
">2months
<div/>

htmlcssmargins

Answer №1

Take a look at the CSS properties white-space: nowrap; and overflow: visible;. While these may not completely solve your issue, they should prevent the bar from becoming too small to display the text.

For additional ideas, check out the article on CSS-tricks. One potential solution involves using the line-height technique to hide the text within the block. To reveal the hidden text, consider having a secondary div positioned to the left or right that remains hidden until the primary text is no longer visible.

Answer №2

To easily position your colored div blocks, you can utilize the padding and margin properties. Then, simply shift the text to the left or right as shown below:

<div style="background-color:green;
            padding:15px;
            margin-top:10px;
            width:10%;
            border-radius: 10px;
            color:black;
            font-weight:bold">
    
    <div style = "padding: 0px 90px;
                  white-space: nowrap;"
    >2 months</div>
</div>

<br />

<div style = "position: absolute;margin-right: 225px;
              white-space: nowrap;
              color:black;
              font-weight:bold"
>7 months</div>

<div style="background-color:red;
            padding:22px;
            margin-top:-10px;
            margin-left:75px;
            width:10%;
            border-radius: 10px;
            color:black;
            font-weight:bold;"
> </div>

If your screen size is not fixed, the above method may cause issues. You can test this by running the code snippet in full screen. In such cases, hard coding the position like this could still work, although it may not be the most elegant solution.

It's important to note that there was a typo in your initial code - it should be </div> instead of <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

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

javascripthtmlcssformsobject

Creating a single row with five columns using HTML and CSS

I'm currently working on setting up a layout consisting of 1 row and 5 columns placed side by side. These columns are going to showcase the projects that I intend to feature on my online Portfolio. To achieve this layout, I am utilizing the Bootstrap ...

htmlcssbootstrap-4multiple-columns

Creating a Dynamic Bar in Your Shiny Application: A Step-by-Step Guide

Currently, I am developing a unique crowd funding shiny app to monitor donation amounts. Is there a method available that allows for the creation of a reactive bar in Shiny? Alternatively, is it feasible to achieve this using html, css, and javascript? He ...

javascripthtmlshinyshinyjs

Behold the magic of a three-column layout with sticky scroll behavior and an absolute

I am struggling with a layout that involves 3 columns, each with its own independent scroll. The first column contains an absolute element that should overflow on the x-axis, but I am having trouble getting the overflow-x:visible property to work when comb ...

htmlcssscrolloverflow

Feed JSON data into a jQuery function using JavaScript

A rudimentary Google Apps Script Web App has been created with the sole purpose of displaying JSON data in an HTML drop-down list. The JSON file is stored in Google Drive. Code inspiration taken from: http://jsfiddle.net/manoj_admlab/Mta5b/3/ However, we ...

javascriptjqueryhtmljsongoogle-apps-script

Having issues with jQuery's .hover and .mouseleave functions causing unintentional looping. Any suggestions on how to resolve this

What I want to achieve: When hovering over the image, it fades out. Text should fade in after the image fades out. Text should fade out when the mouse leaves. The original image should fade back in. End with the original image and no text displayed. Iss ...

javascriptjquerycsshtmlimage

The appearance of the drop-down menu in IE is not the same as in other

I have implemented css bootstrap 3.2.0 on my website. However, I have noticed some discrepancies when viewing the site in Internet Explorer. The menu options have a thick black border and the dropdown menu button appears different compared to other browse ...

csstwitter-bootstrap

Guide on updating directory images by uploading a new one directly onto the site

As someone who is new to HTML, I have a question about updating images on my website through an "admin" page. Currently, I have two websites set up - the main site displays an image from the "images" folder, and the second site serves as an admin page. M ...

htmlcss

Utilizing clip-path polygons for effective styling on Firefox and iOS

I have been working on a plugin to create animated modal boxes by utilizing the clip-path property. However, I have encountered an issue where this code only seems to work in Chrome. You can view the codepen demo here. Unfortunately, it appears that Firef ...

javascriptcsssvgclip-path

Enable the use of custom tags containing hyphens in the kses filter for WordPress

I developed a specialized Wordpress plugin that enables users to incorporate custom HTML element tags (such as <my-element>) into the content of a Post. This allows users without the unfiltered_html capability to utilize predefined custom tags. The ...

phphtmlwordpress

Adjust the transparency level of the image's mapped area

I need help with changing the opacity of a specific area on an image map when clicked. The image has three areas, but I only want to target and change the opacity of the test2 area regardless of which area is clicked. Since my knowledge of jQuery syntax is ...

jqueryhtmlcss

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

triangle shape filled with a gradient that transitions between two colors

I have two triangles displayed at the bottom of my page - one on the left and one on the right. The right triangle is currently transparent but I want to add a gradient effect to it. For the triangle-bottom-right, I'd like the gradient to go from rgb ...

htmlcsscss-shapeslinear-gradients

Tab button that can be easily printed

I'm currently facing a challenge with my HTML code on my website. I have 5 tabs already set up, but I want to add one that redirects users to a printable page that opens the print menu specific to their browser. It seems like there might be an issue i ...

htmlcssprintingtabsuser-controls

Acquiring HTML form information in ASP.NET controller

Currently, I have a view that includes an HTML login form and I am working on passing the form values to a controller via post. My goal is to display the user's username using the Content method once the form is submitted. However, I am facing an issu ...

c#htmlasp.netformsasp.net-core-mvc

Utilizing jquery for displaying and hiding notifications - Notyfy in action

Recently, I've started working with jQuery and have come across the useful Notyfy jQuery plugin. My goal is to display a notification bar with specific messages based on certain conditions such as success or error. I'm trying to achieve somethin ...

jquerycssnoty

Extracting the contents of a Span tag that lacks a class attribute and is not present in every element

I am currently utilizing Selenium in Python to scrape a review page on the web. Specifically, I am interested in extracting the rating of each review (for example, extracting 7 from 7/10 in a review). The structure of the HTML element looks like this: ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...

javascriptjqueryioscsstwitter

Utilizing AJAX in Wordpress to Dynamically Update HREF Links

My website now has AJAX functionality, and you can see a live example at www.mathewhood.com. I am interested in changing the URL format when clicked from To something like , without the /sitefiles/ for security reasons. Below is my code. If anyone is ex ...

javascriptjqueryhtmlajaxwordpress

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

I've recently started using the impressive SASS framework, Boubon.io created by the talented team at thoughtbot. As I experiment with their supplied templates (known as Refills), I'm finding that Bourbon.io serves as a versatile alternative to po ...

htmlcsssass