Arrange the inline-block elements at the bottom of a div

Hey there! I'm currently working on designing a website header using bootstrap 3, which consists of four main divs. Within each of these divs, there are two nested divs.

Imagine one of the initial divs as shown below:

___________________________________
|                                 |
|                                 |
|        180,00€   Total          |
|---------------------------------|
|     for the last 30 days        |
|                                 |
|_________________________________|

My goal is to have text similar to the example above within each of the four divs. The "180,00€" and "Total" are displayed as inline-block spans. I want the upper text aligned at the bottom and the lower text aligned at the top.

If you'd like to see a live demo, feel free to check out this link: JSFIDDLE

Here is the HTML structure:

<div class="row stats-row">
    <div class="col-sm-3 col-xs-6 stat"></div>
    <div class="col-sm-3 col-xs-6 stat"></div>
    <div class="col-sm-3 col-xs-6 stat"></div>
    <div class="col-sm-3 col-xs-6 stat">
        <div class="data">
            <span class="data-num">81,00€</span>
            <span class="num-desc">total</span>         
        </div>
        <div class="data-desc">last 30 days</div>       
    </div>
</div>

And here is the CSS styling:

.row.stats-row {
    -webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    background-color: #f9f9f9;
    padding: 0px;
    margin: 0px !important;
}

.row.stats-row .stat {
    border-right: 1px solid #dae3e9;
    border-bottom: 1px solid #dae3e9;
    height: 80px;
    -webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* EDIT BELOW */

.stats-row .stat .data{
    text-align: center;
    height: 50%;
}
.stats-row .stat .data-desc{
    text-align:center;
    height:50%;
    color:#777; 
    font-style: italic;
    font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
    display: inline-block;
    height:100%;
    line-height:100%;
    vertical-align: baseline;
}
.stats-row .stat .data .data-num{
    margin-right:20px;
    color: #32a0ee;
    font-size: 25px;
}
.stats-row .stat .data .num-desc{
    color: #29323a;
    font-weight: bold;
    font-size: 16px;
}
#monthGraphs .portlet-header h3{
    text-align:center;
}
.graph{
    width:100%;
}
htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Inserting spans within the .data-desc section and efficiently handling it

Check out JSFiddle Demo

Modified HTML section

<div class="data-desc"><span>in the past</span><span>30 days</span></div>

CSS Styling

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');

.row.stats-row {
    -webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    background-color: #f9f9f9;
    padding: 0px;
    margin: 0px !important;
}

.row.stats-row .stat {
    border-right: 1px solid #dae3e9;
    border-bottom: 1px solid #dae3e9;
    height: 80px;
    -webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    -moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
    box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* CONTINUE EDITING BELOW */

.stats-row .stat .data{
    height: 50%;
}
.stats-row .stat .data-desc span{
    height:50%;
    color:#777; 
    font-style: italic;
    font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
   //display: inline-block;
    height:100%;
    line-height:100%;
    vertical-align: bottom;
}
.stats-row .stat .data .data-num{
    color: #32a0ee;
    font-size: 25px;
}
.stats-row .stat .data .num-desc{
    color: #29323a;
    font-weight: bold;
    font-size: 16px;
}
/* CONTINUE EDITING BELOW */

.stats-row .stat .data{
    overflow: hidden; /* quick clearfix */
}

.data span,
.data-desc span{
  width:50%;
  float:left;
  text-align:center;
}

.data span:last-child,
.data-desc span:last-child{
  text-align:left;
    padding-left:16px;
}

Assigning classes to the spans would eliminate the necessity of using last-child, and adjustments could be made to the line-heights. Honestly, considering a table might just be a simpler option. :)

Answer №2

Based on my understanding of the question, you could experiment with incorporating the following code snippet at the conclusion of your CSS file:

.data-num{
    padding-top:15px;
}

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 outcome of jQuery's division and multiplication is not correct

When a user inputs data into the form fields, the other fields should be automatically filled with the calculated values. However, it appears that jQuery is treating the input values as strings instead of numbers, leading to incorrect calculations. I&apos ...

htmljquery

Move the container all the way to the left

On my page, I have a grey section with the heading 'Start Analysis' that needs to be shifted to the left along with all its contents. How can this be achieved? The HTML code for the section is as follows: <!DOCTYPE html> <html lang="en ...

htmlcsstwitter-bootstrap-3

merging the central pair of columns in the bottom row

I am having trouble combining the middle two columns in the third row of my table code. The columns remain separate and do not merge as intended. Can anyone help me identify what is causing this issue in my code? table { border: 1px solid #999; } td ...

htmlhtml-table

What is the best approach to create a JavaScript search filter function spanning two pages?

Page1.html has a form with a drop-down menu containing options Color and Shape. There is also a submit button. Assuming Page2.html displays various shapes like Blue Square, Red Square, Blue Circle, Red Circle, is it feasible to create a JavaScript file th ...

javascriptjqueryhtmlcssfilter

Issue with Three.js GLTF loader peculiar behavior while attempting to incorporate three-dimensional text

I had an idea to import a prebuilt gltf scene created in Blender, then add some 3D text using the ttf loader and manipulate it. Each loader worked perfectly when used separately, but strange things started happening when I combined them into a single scrip ...

javascripthtmlthree.jsgltf

Transition within Bootstrap navbar is not as smooth as desired

My bootstrap navbar HTML code is as follows: <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgb(50, 50, 50)"> <button class="navbar-toggler" type="button" data-toggle="col ...

htmlcssbootstrap-4

Using HTML and CSS to Dynamically Alter Cell Text Color Based on Value

Unfortunately, I am unable to find a straightforward solution. My goal is to adjust the text color inside my cell based on its value. Here is a basic table: <table> <tbody> <tr> <td>Quantity</td> <td> ...

jqueryhtmlcsshtml-tablecell

Is there a way to reset the dynamic flexslider when a click event occurs?

Seeking a way to refresh the flexslider on a click event. I have embedded the flexslider in a Bootstrap pop-up and need it to update when the user clicks. The issue arises when I try to refresh the slider as it fails to display properly, likely due to losi ...

javascriptjquerycsstwitter-bootstrapflexslider

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

jquerycssaccessibility

Accessing PHP variables within the HTML portion of a PHP document

Setting up my own contact form for the first time using PHP has been a learning experience. While I am able to receive emails from the form, I'm struggling to display the user-inputted information in the email. The HTML <label for="name"> ...

phphtmlvariables

connect a column from a separate array in pdfmake

In my current project, I am looking to link the values of an array that is different from the one present in the initial two columns. Is this achievable? (The number of partialPrice values aligns with the number of code entries). Despite several attempts ...

javascripthtmlangulartypescriptpdfmake

Fetch real-time server information using the img src attribute

Currently, I am using ajax jQuery to dynamically populate an image src with a value that is retrieved from the server. However, I would like to streamline the code and eliminate the need for the jQuery portion. This is the current setup: Javascript (code ...

jqueryhtmlasp.net-mvc-4

What is the process to create a sticky Material UI grid element?

Currently, I am in the process of developing the front-end for a shopping cart. To organize the content, I have split the container into two columns using Grid container and Grid item. In each column, various components are placed - the left side containin ...

cssreactjsmaterial-ui

How can I make sure to consider the scrollbar when using viewport width units?

I've been working on developing a carousel similar to Netflix, but I'm facing an issue with responsiveness. I've been using a codepen example as a reference: Check out the example here The problem lies in the hardcoded width and height use ...

javascriptcss

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

javascripthtml

How can I trigger a function or automate code execution in Angular?

I have some code within a function that is crucial for initializing other variables. The issue I am facing is that this function does not execute unless it is called through another tag in the HTML. Is there a method to automatically initialize this func ...

htmlangular

When a table undergoes a dynamic reload, the formatting for the columns fails to display properly

After fetching image metadata from an API call, a table is dynamically generated on page load. Subsequently, when new images are uploaded, the function responsible for building the table is called again to include this new data. However, despite the CSS st ...

jqueryhtmlcssajaxhtml-table

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

javascriptjqueryhtmlcss

Having trouble implementing CSS styling on my Django HTML file

I have come across several solutions on this issue but haven't been able to resolve my problem. I am attempting to apply my style.css located in the path \...\static\css. Below is my directory structure as shown in the image here: Here ...

pythoncssdjangodjango-settingsdjango-static

sketch a portion of a picture on a canvas

My challenge involves a canvas with dimensions of 400 by 400, and an image sized at 3392 by 232. I am looking to crop the first 400 pixels of this image and display them within the canvas. How can I achieve this task? $(document).ready(function () { v ...

javascripthtmlcanvas