Create a string of text that aligns to the left and then to the right

After spending the entire day attempting to make this work, I'm starting to doubt if it's even achievable..

The goal is for the word "Sugar" to expand to the left and then fill up before moving to the right when a longer string of text is entered. This would help maintain a consistent design layout.

I am beginning to suspect that accomplishing this with just CSS may not be feasible?

This is what my current code looks like:

#air_track {
  color: #fff;
  float: left;
  margin: 24px 0 0 30px;
}
#air_track-span-1 {
  font-family: GothamBlack;
  font-size: 23px;
  font-weight: 900;
  float: left;
}
#air_track-span-2 {
  font-family: GothamBook;
  font-size: 20px;
  line-height: 10px;
  text-align: right;
  float: right;
}
<div id="air_track">
  <span id="air_track-span-1">Maroon 5</span>
  <br />
  <span id="air_track-span-2">Sugar</span>
</div>

htmlcss

Answer №1

I haven't personally tested this method, but it could provide you with a starting point for using jQuery to accomplish the task. It seems that there isn't a direct CSS solution available.

  1. Use the .each function to locate all elements with the class name "title,"
  2. Determine the width of each title element,
  3. Find the width of the next element, which should be the subtitle,
  4. Compare the widths of the title and subtitle elements using an if statement,

You can then utilize the .css function to adjust the styles accordingly.

$('.title').each(
    function(index, el) {
         thisWidth = $(el).width();
         subTitleWidth = $(el).next().width();
         if(thisWidth>subTitleWidth) {
              // Align to the right 
         } else {
              // Align to the left
         }   

    }
);

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

Click event not being triggered in Handlebar JS

VIEW DEMO Hey there, I've been struggling to implement a simple click event for dynamically loaded JSON data in an anchor tag. I've tried using both vanilla JavaScript and jQuery but haven't been successful in making it work. The same func ...

javascriptjqueryhtmlhandlebars.js

Artboard: Easily navigate through pictures

As part of a school assignment, I wanted to create an interactive story where users can click through images using the UP and DOWN buttons. However, I am facing an issue with my If function overriding the previous function. I envision this project to be a ...

javascripthtmlimagecanvaskeyevent

Verify the authenticity of a date using the locale parameter in the Intl API

Seeking advice for validating inputfield based on locale argument. How to format dates differently depending on the specified locale? For example, if locale is 'en-uk' then date should be in mm/dd/yyyy format, but if locale is 'de-ch' i ...

javascripthtmlvalidationdateecmascript-6

In the hierarchy of web design elements, z-index takes precedence over css background images, which in turn take precedence over absolutely positioned

How can I position my p tag above all other elements? Here is the code snippet: HTML <section class="key-fundamentals"> <div class="container"> <img class="img-man-cbox img-responsive" src="images/img-man-cbox.png"& ...

htmlcss

Is there a way to upload multiple files using expressjs?

I'm looking for a way to efficiently send multiple files, including an entire directory, so that I can access them in another JavaScript file called from an HTML file. const app = require("express")(); const http = require("http"). ...

javascripthtmlnode.jsexpress

Failure to respond to dual part form by RemoveClass

Currently, I am utilizing jQuery to visually control a form. The issue arises when trying to remove classes from the first part of the form using removeClass. While this works initially, upon clicking the button to advance to the second part of the form, t ...

javascriptjqueryajaxcss

Seeing the Bootstrap css load immediately upon the page loading and switching between pages

Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transition ...

htmljquerycssbootstrap-5

Guide to transforming the image's color with CSS3

Is there a way to transform the color of an image from grayscale to green, red, or yellow using CSS3? I attempted the code below but unfortunately, it did not produce the desired result. img { -webkit-filter: hue-rotate(90deg); filter: hue-rotat ...

css

The mobile website is not adjusting to the viewport size as expected

I'm currently working on a website and experimenting with responsive design. Unfortunately, I'm facing an issue where every mobile browser is not scaling the site properly. Regardless of the browser, the site appears as 1000px or wider. I have at ...

htmlmobileresponsive-design

Tips for locating an element without a class assigned

I am currently utilizing the webdriverIO framework for my script, specifically working with a calendar where I need to extract only the days from the current month. Below is an excerpt of the HTML code: <tr class="daysrow"> <td class="day w ...

javascripthtmlselenium-webdriverjquery-selectorswebdriver-io

Displaying an element outside with reduced opacity using fabric js and controls placed above overlay

The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...

javascripthtmlcssfabricjs

Encountering a vast expanse of empty white void

Attempting to create a scrollbar within my content div instead of the entire window seems to be causing a large white space in the content box, and I'm struggling to understand why. Can someone take a look and help me identify the issue? You can view ...

jqueryhtmlcssscrollbar

Unable to reduce the height of the li element

Even though I've attempted to adjust the height of the lis in this section using CSS, I can't seem to shorten them as desired: I've experimented with setting a line-height, adjusting the height, ensuring that paddings and margins are set to ...

css

The absence of the pyramid in the WEB GL canvas is noticeable

I encountered an issue while attempting to generate two shapes on the canvas: an octagon and a pyramid. The octagon displays correctly, but the pyramid does not appear as expected. Below is the code snippet related to the creation of the pyramid: pyramidP ...

javascripthtmlcanvaswebgl

Enumerating multiple div elements in Selenium using Python

I am attempting to create a web scraper in Python, but the classes of the tiles are updated dynamically. This means my only option is to use xpaths. The issue I'm facing is that within the divs, they change between different cards. For example, Card ...

pythonhtmlselenium-webdriverweb-scraping

Has anyone come across an XSLT that can effectively convert Apple Pages files into high-quality HTML?

When Apple’s word processor/DTP app Pages saves its files, it does so as zipped folders with an XML file containing the content and attachments like images stored as separate files. I am interested in converting this content into HTML format, using < ...

htmlxsltiwork

What is the purpose of Firebug adding <tbody> elements to <table> tags?

While analyzing the HTML source code, I noticed that the <tbody> tag is missing. However, when inspecting the code using Firebug in the HTML tab, the <tbody> tag suddenly appears. What could be the reason behind this discrepancy? ...

htmldomfirebug

Vue.js - dynamically applying CSS classes based on conditions

Within a VueNative project that utilizes NativeBase as a component library, with tags prefixed by nb-, the code snippet below is found within the <template> tags of the footer.vue file which houses navigation buttons. This piece of logic successfully ...

javascriptcssvue.jsvuejs2vue-native

Having trouble getting datatables.net to function properly with JavaScript

I've been experimenting with datatables from http://datatables.net/ Attempting to make it work using javascript, but I'm facing issues. Even when following the example provided on the website, it still shows a blank page. Does anyone have any su ...

javascripthtmldatatables

What is the best way to trigger multiple functions within an action?

I am currently encountering an issue with calling multiple functions using AJAX. My objective is to call different functions through AJAX, in such a way that when I make these calls, they should send a request and receive the returned values of those fun ...

ajaxhtmlasp.net-mvc-4