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

What are some ways to adjust the size of the option field in a select menu?

In my ionic popup, I have a HTML property called select with nested options. Below is the code snippet along with the applied CSS. My query is how can I set the white space to occupy the entire area of the select? https://i.stack.imgur.com/iPqAa.png http ...

javascripthtmlcss

Steps to designing an Arrow with styled-components

I am currently working on customizing my orange arrow to resemble the pink arrow, but I want to achieve this without relying on an external CSS library like bulma. The reason the pink arrow looks different is because it utilizes the bulma library in its st ...

cssnext.jsstyled-components

Control your thumbnails with the powerful iDangerous Swiper feature

Are you new to coding? I'm looking for help on linking thumbnail images to a swiper so that when a thumbnail is clicked, it moves the swiper-container to the corresponding slide. Any ideas or suggestions would be greatly appreciated! Here's an e ...

jqueryhtml

What is the best way to implement a sidebar closing animation?

Utilizing both react and tailwindcss, I successfully crafted a sidebar menu that elegantly appears from left to right when the user clicks on the hamburger icon. However, my attempts to create a reverse animation as the sidebar disappears from right to lef ...

javascriptcssreactjsnext.jstailwind-css

Error Handling in PHP Form with HTML and Image Upload

Let me give you some context first. Recently, I've delved into the world of php and have been at it for a few days now. My code might be a bit messy, but I've done my best to markup as much as possible. I have a form where three things are expec ...

phphtmlformsemail

Is it possible to scale images dynamically using CSS without losing their proper proportions?

http://jsfiddle.net/CJzCA/ Is there a way to resize images using CSS in the above jsfiddle? The keyboard images are currently too big compared to the text, and I usually solve this issue by using Photoshop. It would be more convenient if we could resize t ...

cssimage-resizing

Using fixed positioning in CSS caused a malfunction in the layout of Materialize columns

Looking to develop a unique sidenav menu design for Large and Medium screens using Materialize. After referring to the example provided in the Materialize documentation, I successfully implemented it and found it cool! However, my goal is to have the Sid ...

htmlcssmaterialize

Challenges associated with utilizing img src in JavaScript

I am facing a simple issue. I have carInfo data retrieved from a JSON file, but I am struggling to correctly parse the img source stored in the variable $imgsrc instead of treating it as a string called "$imgsrc". This data needs to be appended to my HTML ...

javascriptjqueryhtmlajax

Display the content of an md-dialog with a scroll bar

I am experiencing a problem with printing a long report created using md-list displayed in a md-dialog. When I attempt to print it, only the section that is currently visible on the screen gets printed instead of the entire length of the md-list. I have at ...

cssangularprintingmaterial-designangular-material

Customizing Bootstrap Modal's backdrop CSS for a specific element

Upon opening a bootstrap modal, the background takes on a darker shade as seen here. I am looking to apply a CSS class that mimics this shading effect to a specific element. I prefer not to use any JavaScript for this task as it is purely about styling wi ...

csstwitter-bootstrapbootstrap-modal

Bulma: Tips for creating equally sized buttons?

I am working with Bulma CSS and trying to ensure that all my buttons are the same size. Currently, each button appears to have a different size based on the text content. I have looked into using the "is-fullwidth" option, but it makes the buttons too la ...

htmlcssbulma

Interested in learning how to code games using JavaScript?

Hi everyone, I'm currently exploring the world of Javascript and have been tasked with completing a game for a class project. The game involves a truck that must catch falling kiwis while only being able to move left or right. A timer is set for two m ...

javascripthtml

Retrieving information from a form containing a list of numerous values

Thank you all for taking the time to review my code. Unfortunately, I couldn't solve the issue until I went through more code and redid everything. Eventually, I found the solution using PHP for the form: Here's my HTML form (some descriptions a ...

phpjqueryhtmlemail

Locate the coordinates on an HTML5 canvas that correspond to a specified color

Is there a more efficient method to identify the coordinates of pixels with a particular color without looping through every pixel in the image? ...

htmlcanvashtml5-canvas

Ways to showcase numerous products within a single category label

views.py : def get_meals(request): template = loader.get_template('café/meals.html') meal_data = MealInfo.objects.all() category_data = MealsCategory.objects.all() context = { 'meals': meal_data, ' ...

pythonhtmldjangosqlite

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to automatically activate the "Add" button when I hit the enter key in the text box?

Being someone who relies on to-do lists, I implemented a system where you can input tasks into a textbox and click the add button to see them listed below. However, I found it cumbersome to keep clicking the add button every time I wanted to quickly add mu ...

javascripthtmlcss

Creating two dropdown menus from a PHP array

Currently, I have a PHP array structured like this. $food = array ("Fruits" => array("apple","mango","orange"), "vegies"=> array ("capsicum", "betroot", "raddish"), "bisucuits"=>array("marygold", "britania", "goodday")); My task is to create two ...

phpjqueryhtmlajax

The toggle button is having issues functioning properly within a While loop

Is there a way to enable slideToggle for all my queries? Currently, it is only working on the first query. Any suggestions on how to resolve this issue? JS code $(document).ready(function(){ $("#SendCopy").click(function(){ $("#users").slideToggle("s ...

phpjquerycss

Is there a way to determine the names of the functions that are being called?

I'm working on mastering Google Development Tools. Is there a way to determine which specific functions, especially those in Javascript, are needed before a page can load successfully? ...

javascripthtmlconsoleload