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:

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

Styling components in React using inline styles that are based on JSON values

I'm successfully pulling in JSON data and mapping it within a React component. However, one of the values in the JSON is a HEX code that I want to apply as an inline style for the background color of a div. I have experimented with various methods, b ...

cssjsonreactjs

Tips for delivering a variable to a React Native Stylesheet

Is there a way to pass a variable to the "shadowColor" property in my stylesheet from an array declared in the code above? I keep encountering a "Can't find name" error. Attempting to use a template literal has not resolved the issue. Any assistance w ...

javascriptcssreactjstypescriptreact-native

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...

htmlangulartypescriptangular-ivy

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

jqueryhtmlcsshidebackground-image

jQuery Accordion not showing up on screen

On my FAQ page, I have integrated a jQuery Accordion with a repeater control nested inside to display various questions and answers. The FAQ page utilizes a master page named LaunchPage.Master. Here is the code for LaunchPage.Master: <html> <he ...

jquerycssasp.netjquery-ui-accordion

Manipulating video volume using JavaScript injection

My web page includes a video, and I have successfully used JavaScript injection to control the play/pause functionality. Now, I am looking to also adjust the volume based on percentage. How can I create a function that decreases or increases the volume acc ...

javascripthtmljavascript-injection

I'm having trouble getting my window resize event listener to function properly. I'm using a combination of Three.js and Vuetify.js

My goal is to incorporate a three.js renderer into a div element using the vuetify.js framework. I want my code to dynamically adjust the dimensions of the div element whenever the window is resized. I have excluded unnecessary code blocks from this excer ...

javascripthtmlvue.jsthree.jsvuetify.js

Optimize Material-UI input fields to occupy the entire toolbar

I'm having trouble getting the material-ui app bar example to work as I want. I've created a CodeSandbox example based on the Material-UI website. My Goal: My goal is to make the search field expand fully to the right side of the app bar, regar ...

javascripthtmlcssreactjsmaterial-ui

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

javascriptcssjsonchrome-extension-manifest-v3

programming for the final radio button text entry

I am struggling with a form that has 5 radio buttons, including an "other" option where users can manually enter text. The issue I'm facing is that the form only returns the manual entry text and not any of the preset radio values. I need it to work f ...

javascripthtmltextradio-buttonvar

Images that dynamically adjust to different screen sizes with captions that are perfectly

For a while now, I have been utilizing <picture> to display images with more design control. I typically use CSS to show or hide specific images within the <div> block. However, I am now considering using <figure> with <figcaption> ...

cssresponsive

`There is a delay in rendering the background image on Chrome`

Once I apply a class to my button element using JavaScript, the background image (.gif) that is supposed to display afterwards takes an unusually long time to render. The button serves as a form submission. Upon being clicked, a class of "clicked" is dyna ...

javascriptcssgoogle-chrome

What is the recommended way to retrieve a "NA" value when the radio button is not chosen or unavailable?

I want to assign the value "NA" when no radio button option is selected. Currently, I am using the following code snippet: $("input[name='question']:checked").siblings('label').text(). However, this code returns a blank value if any rad ...

htmljquery

Troubleshooting Issues with jQuery Accordion Buttons

I have a nearly complete accordion that just needs some adjustments. HTML CODE: <footer> <div> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> ...

javascriptjqueryhtmlcss

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

(Just when I thought I've encountered all the strange IE CSS bugs, here comes another one. Is there a name for this double-vertical-padding bug?) After creating a simple test case that worked perfectly in browsers like FF and Opera, I was surprised t ...

cssinternet-explorer

How can I align bullets in an unordered list with the left margin of the heading above?

Is there a way to line up the bullets with the left margin of the text above the list? Here's an example: <html> <style> ul.p1 {padding-left: 40px} ul.p2 {padding-left: 0px} </style> <body> <h2&g ...

htmlcss

Updating the contents of one specific div without affecting all other divs with the same class

Below is the HTML code snippet in question: <a class="btn test-btn test-btn-1"> <span>Content 1</span> </a> This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generat ...

javascriptjqueryhtmlcss

Javascript dynamically generates CSS animations

I need assistance creating a div with a CSS3 animated timer inside it when a button is clicked. Here is the code I have been working on: http://jsfiddle.net/arcco96/y5nov6rz/1/. Unfortunately, the div is not being created as expected. I believe the code sh ...

jqueryhtmlcssanimation

Issues with special characters in @font-face rules

For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems: The code I used looks like this: (fonts G ...

csscross-browserfont-face

Dynamic updating of scores using Ajax from user input

My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...

javascriptjqueryhtmlcssajax