Arrange various numbers in a single row to be in line with

I'm utilizing bootstrap in an attempt to design the layout depicted below:

https://i.sstatic.net/0w06U.png

Here is a simplified version of my code:

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.price {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #131722;
  white-space: nowrap;
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  height: 34px;
  font-weight: 700;
}

.diff {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  font-size: 18px;
  color: #26a69a;
  display: inline-block;
}

.markettime {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #37bc9b;
}

.markettime2 {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #787b86;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>

<div class="row my-2">
  <div class="col-lg-8">
    <div class="card card-primary">
      <div class="card-body p-2">
        <div class="row">
          <div>
            <div>
              <div class="row">
                <div>
                  <div class="price">304.2<span class="">0</span></div>
                </div>
                <div>
                  <span class="curr"> USD</span>
                </div>
                <div>
                  <span class="diff">+3.57</span>
                  <span class="diff">(+1.19%)</span>
                </div>
               </div>
             </div>
           </div>
         </div>
         <div class="row">
           <div>
             <span class="markettime">Market Open</span>
             <span class="markettime2">(May 07 13:19 UTC-4)</span>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

The styling seems correct but the alignment is off. Any ideas why?

htmlcss

Answer №1

Your content is organized within div elements, which are set to default as display: block. Blocks consume the full width of their container. One alternative approach is to switch these displays to inline:

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.price {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #131722;
  white-space: nowrap;
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  height: 34px;
  font-weight: 700;
}

.diff {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  font-size: 18px;
  color: #26a69a;
  display: inline-block;
}

.markettime {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #37bc9b;
}

.markettime2 {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #787b86;
  white-space: nowrap; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>

<div class="row my-2">
  <div class="col-lg-8">
    <div class="card card-primary">
      <div class="card-body p-2">
        <div class="row">
          <div>
            <div>
              <div class="row">
                <div style="display: inline;">
                  <div class="price">304.2<span class="">0</span></div>
                </div>
                <div style="display: inline;">
                  <span class="curr"> USD</span>
                </div>
                <div style="display: inline;">
                  <span class="diff">+3.57</span>
                  <span class="diff">(+1.19%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="markettime">Market Open</span>
            <span class="markettime2">(May 07 13:19 UTC-4)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I suggest avoiding inline styling like I've demonstrated above, but it serves as a quick illustration of how changing the display property can impact your layout.

Answer №2

Instead of having all those empty <div> elements, you can create new block elements that will fill up the horizontal space on a new line.

I have optimized both the HTML and CSS code here. Just by making changes to the HTML, the functionality is already improved:

body {
  /* Consolidated common properties here: */ 
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1
}

.price {
  font-size: 36px;
  font-weight: 700;
  color: #131722;
}

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.diff {
  font-size: 18px;
  color: #26a69a;
}

.marketTime__base {
  font-size: 11px;
  letter-spacing: .4px;
  margin-top: 8px;
}

.marketTime__state {
  color: #37bc9b;
}

.marketTime__datetime {
  color: #787b86;
}
<div class="row">
  <span class="price">304.20<span></span></span>
  <span class="curr"> USD</span>
  <span class="diff">+3.57</span>
  <span class="diff">(+1.19%)</span>
</div>

<div class="marketTime__base">
  <span class="marketTime__state">Market Open</span>
  <span class="marketTime__datetime">(May 07 13:19 UTC-4)</span>
</div>

If needed, you could also utilize display: inline or display: inline-block for styling those <div> elements differently. But I believe simplifying the HTML structure would be a better approach.

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

Adjust the height attribute of a DIV element within a webpage that contains a "footer"

I'm hoping to achieve a scrollable middle section without the bottom scrollbar, and I prefer a CSS solution over using JavaScript for this. On my website, I have a 150px high div filled with icons and images that needs to be fixed while allowing the r ...

csshtmlheight

What is the best way to loop through <div> elements that have various class names using Python 3.7 and the Selenium webdriver?

I am currently in the process of creating a Reddit bot that provides me with a detailed report about my profile. One task I need to accomplish is identifying which of my comments has received the most likes. Each comment on Reddit is wrapped in elements w ...

htmlseleniumpython-3.7

Tips for displaying and hiding content in Angular2

I have a component that toggles the visibility of elements by clicking a button. This is the snippet of my HTML code: <div *ngFor="let history of histories | sortdate: '-dateModified'"> <p><b>{{ history.remarks }}</b& ...

htmlangular

Failure to align Bootstrap columns side by side despite being within the same row

I'm having an issue with aligning the columns in my testimonials section. Despite using col-md-5 for each column, they are not lining up side by side as expected. Here is the code I am currently using: <section id="testimonials"> <d ...

htmlcssbootstrap-4

Switch between the inner unordered list

Take a look at this Fiddle http://js-fiddle.net/jVfj5/ My goal is to have the Sub Categories (Nested Ul) display when I click on Services, while they are hidden by default. Additionally, only the ul under Services should open, not all the other ul's ...

jquerycss

Is there a way to transfer the data from a `HtmlService.createHtmlOutput()` to a variable after clicking the `submit` button event?

The code snippet below is encountering an issue where arrayStored is not defined in the submit function. I attempted to retrieve the value of arrayStored using the e.parameter method, but it did not work as expected. As a newcomer to HtmlService, I am cu ...

htmlgoogle-apps-script

Trigger submission issue encountered with Jquery in a dialog (modal) window

It's somewhat difficult for me to fully explain my problem. Nevertheless, I'll give it a go. In my HTML code, I have implemented several triggers using Jquery. Trigger 1 is responsible for validating specific items within a form. Once Trigger 1 ...

jqueryhtmltriggers

Aligning a single component in the center vertically with the appbar positioned at the top of the screen using Material

As a beginner with material UI, I am facing challenges in centering a component both horizontally and vertically on my screen while including an AppBar for navigation at the top. While I have come across solutions like this example using a grid system, i ...

htmlcssreactjsmaterial-ui

Seamless border that flows through several elements

I'm currently working on integrating line numbers into a code snippet. I've managed to get it functioning, but there's an issue with the border between the line number and the code. Instead of being continuous, there are small, unsightly gap ...

cssborderline-numberscss-counter

Is there a way to locate a file by inputting a partial name?

How can I create a search bar that allows me to find files in a folder (songs) by typing only part of the song name? For example, if I type "he," it should show results like "hello" and "hey." Is there a way to take my input and search for it within file n ...

phphtml

How is it possible to encounter a Javascript unexpected token ] error within an HTML code?

While working on my project, I encountered a JavaScript error in the console of Chrome. The error message stated "Unexpected token ]" and it was pointing to a specific line of raw HTML code. I am puzzled about what could be causing this issue. Unfortunatel ...

javascriptjqueryhtmlgoogle-chrome

Creating multiple divs with input fields dynamically using JavaScript is a useful skill to have

I need to generate 3 input text boxes for gathering user input on names and email addresses. These inputs must be created dynamically, meaning that as the user clicks on the email input field, a new line with all three elements should be generated. Below i ...

javascriptjqueryhtmluser-inputtextinput

Getting all "li" elements from the "ul" class using Selenium WebDriver is a required task for web scraping or automated testing

As a beginner in Selenium webdriver, I recently encountered a task where I need to automate clicking on all links within a specific section. Could someone provide me with the Java code for this? I have attached an image displaying the Firebug properties of ...

javahtmlseleniumselenium-webdriver

What is the best way to click within a web browser control?

I'm attempting to automate the process of clicking a specific div id button using vb.net. I have integrated a webbrowser for this purpose, and here is my current code snippet. The goal is to click the 'Do Job' button on the website through v ...

htmlvb.netwinformsbuttonwebbrowser-control

What is the method for displaying an array in JavaScript?

When a user clicks the value 3 input box, three input boxes will appear where they can enter values. However, when trying to submit the array, no elements are printed and an error message "Element is not defined" appears. var arr = [0]; function get_va ...

javascripthtml

Learn how to incorporate PHP7 code into your HTML file through the use of .htaccess configurations

I have a Linux server with PHP 7.* installed. I want to embed PHP code into HTML files, but currently it just renders the PHP code on the webpage. I've tried adding the following code to my .htaccess file, but it doesn't seem to be working: AddH ...

phphtml.htaccess

How can I eliminate a class when the scrollTop() position matches a specific div element?

I am trying to implement a script that will allow me to scroll to my navigation and then change the class of the navigation, however, it is not working as expected. $(window).scroll(function() { if ($(window).scrollTop == $('.menu_nav').offs ...

jquerycss

What is the best way to integrate an admin template into a website without relying on popular CMS platforms like WordPress?

Do I need to use a WordPress system in the backend in order to utilize an admin template? I've noticed that there are several sleek web admin templates available in Bootstrap. I'm interested in using one of them but unsure how to do so without re ...

javascripthtmlwordpresstwitter-bootstrap

What could be the reason for the state not initializing with the provided value?

It seems that the latest value is being passed through props, but when it is set as the initial value for state, it doesn't appear. https://i.stack.imgur.com/7dVf2.png import React, { useRef, useState } from "react"; //importing config fr ...

htmlreactjswebreact-hooks

Discovering whether an image contains a caption with the help of JavaScript

There are various websites that display captions on images in paragraphs, h1 tags, or contained within a div along with the image. I am interested in learning how to determine if an image has an associated caption using JavaScript, especially when the cap ...

javascripthtmlcss