Keep the div anchored to the bottom of its container

I created a minimalist CSS bar chart, but each bar originates from the top.

.wrap {
  width: 400px;
  position: relative;
  overflow: hidden;
}

.barchart {
  display: inline-block;
  margin-left: 0.2px;
}

.barchart.column {
  width: 11px;
  margin-left: 3px;
  font-size: xx-small;
  text-align: center;
  color: #fff;
}
<div class="wrap">
  <div class="barchart column" style="background: #666; height: 
    50px">5</div>
  <div class="barchart column" style="background: #666; height: 
    70px">7</div>
</div>

Live Example: https://jsfiddle.net/jL68sa0h/

I attempted to use position: relative for the parent div and position: absolute; for the bars without success...

Is there a way to keep the bars anchored to the bottom exclusively with CSS? Thank you!

htmlcss

Answer №1

To ensure proper alignment, include vertical-align:bottom; in your .barchart class:

.wrap {
  width: 400px;
  position: relative;
  overflow: hidden;
}

.barchart {
  display: inline-block;
  margin-left: 0.2px;
  vertical-align:bottom;
}

.barchart.column {
  width: 11px;
  margin-left: 3px;
  font-size: xx-small;
  text-align: center;
  color: #fff;
}
<div class="wrap">
  <div class="barchart column" style="background: #666; height: 
    50px">5</div>
  <div class="barchart column" style="background: #666; height: 
    70px">7</div>
</div>

Answer №2

Have you considered utilizing flexbox? Simply turn your wrapper into a flexbox and align the items to flex-end:

.container {
  display: flex;
  align-items: flex-end;
}

Answer №3

For this situation, utilize either flex-flow: wrap-reverse; or align-items: flex-end;

.wrap {
      display : flex;
      flex-flow: wrap-reverse;
}

Here is the solution: 

.wrap {
  width: 400px;
  position: relative;
  overflow: hidden;
  display : flex;
  flex-flow: wrap-reverse;
  height:100vh;
}

.barchart {
  display: inline-block;
  margin-left: 0.2px;
}

.barchart.column {
  width: 11px;
  margin-left: 3px;
  font-size: xx-small;
  text-align: center;
  color: #fff;
}
<div class="wrap">
<div class="barchart column" style="background: #666; height: 50px">5</div>
<div class="barchart column" style="background: #666; height: 70px">7</div>
<div class="barchart column" style="background: #666; height: 90px">9</div>
<div class="barchart column" style="background: #666; height: 110px">11</div>
<div class="barchart column" style="background: #666; height: 130px">13</div>
<div class="barchart column" style="background: #666; height: 80px">8</div>
<div class="barchart column" style="background: #666; height: 100px">10</div>
</div>

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

Using JQuery to append an additional column to an HTML table at the end, determined by array information

I've been experimenting with how to enhance an html table by adding a new column of data. The process involves clicking a button, extracting the existing data column in the table, storing it in an array, performing calculations on it, and then display ...

javascriptjqueryhtmlarrays

Adding a new element to the division is malfunctioning

I have a button within a div element. <div class='test'> <button class="bt1">add statement</button> </div> I am trying to use jQuery to append the following content below the div when the button is clicked: $(".test ...

jqueryhtml

Cookies in Chrome must be set with the assistance of a server

I recently completed a small project that does not rely on a server for functionality. In this project, I utilized cookies to store and retrieve values. Surprisingly, the project works seamlessly in Firefox, Safari, and IE 9 as it successfully sets and ret ...

javascripthtmlgoogle-chrome

A guide to showcasing JSON data on a webpage using JavaScript

I am currently working on a SOAP WSDL invocation application in MobileFirst. The response I receive from the SOAP WSDL is in JSON format and is stored in the result variable. When trying to access the length of the response using result.length, I encounter ...

javascripthtmljson

The transparency of an image is being lost when it is used in a modal

I am facing an issue when trying to append a modal that contains only a transparent gif. The problem arises when the transparent background of the gif is not displayed properly. There seems to be no issue with the transparency settings of the gifs themselv ...

htmlcssvue.js

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

Is my question clear? Here's an example to illustrate: let string = "Test text ab/c test Test t/est ### Test/ Test t/test Test test" I want to remove / only from the line that includes ###, like so: Test text ab/c test Test t/est ### Test T ...

javascripthtmlregexstring

What steps can be taken to prevent the progress bar from extending beyond the boundaries of the

Hey there, I'm facing a little issue with my website. I'm working on adding a skill progression bar section and have a sticky navbar in place for easy navigation. However, as I scroll down, the progress bars seem to overflow into the navbar. Any ...

htmlcssanimationcss-animations

Optimizing Image Fit and Positioning for Different Web Browsers

I have designed a webpage using HTML, JavaScript, and CSS that features a photo carousel allowing users to navigate through images by clicking left and right arrows. The carousel's container is set at 500px tall and takes up 100% width of its parent d ...

cssimagecross-browser

The drop-down menu seems to have disappeared from sight

I'm having an issue with getting a dropdown to appear in my registration form. Everything else in the form is displaying correctly and functioning properly, but the dropdown remains invisible. After searching extensively, I haven't been able to ...

phphtmlcssyii

Discover real-time results of accordions and their information as you search

I am looking to add a search functionality to filter through a list of accordions and their contents on my HTML page. I want the search box to be able to search both the accordion titles and the content within each accordion. This is my first time posting ...

javascriptjqueryhtmlcss

What could be causing Safari to alter the heights of my div element?

After completing a challenge for FrontEnd Mentor, I excitedly texted a friend my demo link to showcase my work. However, upon opening the link on my phone, I discovered that the formatting was all over the place. Switching to Safari on my desktop only made ...

htmlcsssafarifrontendcross-browser

Click to alternate video sources

Take this scenario for instance: In Section 1 HOME, there is a video loop with "video source 1". My goal is to change the video source to "video source 2" by clicking on the video in section 1, however, video2 should only play once and then switch back to ...

javascripthtmljsonvideobootstrap-4

The correct way to reference images in the resources folder using a URL in CSS

After I generated a Maven dynamic web project using an archetype, I decided to organize the javascript, css, and image folders under the webapp folder. The structure now looks like this: myproject | main | | | java | | | resources | | ...

cssmaven

retrieving the selected checkbox value

My challenge is to extract the values of dynamically changing checked checkBoxes on my webpage. For example: while ($row=myqli_fetch_array($result)){ echo"<div>"; echo"<select id=\"course\" onchange=getCheckBox()> <opt ...

javascriptjqueryhtmlajax

Move the scroll event binding from the parent element to the child element

I'm working on an HTML page with the following structure: <div class="parent"> <div class="child1"> <div class="child2"> </div> </div> </div> Currently, I have a scr ...

javascripthtmlcssangularjs

Combining data from an API using Vue for seamless integration

I need to extract data from an API, such as imdbID, and then append ".html" to it in order to create a variable that can be placed inside the href attribute of a button. However, I am facing difficulties in achieving this. Thank you in advance for your hel ...

javascripthtmlvue.js

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

csstwitter-bootstrap

Ensure that the bottom border of the navigation bar is in line with the

How can I achieve a bottom separator for the navbar that seamlessly aligns with the rest of the page design, similar to the approach taken by Refactoring UI as shown here? Currently, when I add a border to the container inside the navbar, it extends beyon ...

htmltwitter-bootstrapbootstrap-4

Ways to exhibit API information leveraging the prowess of Ajax

I am looking for a way to utilize the API in order to present data in an organized manner, similar to the following example: Job Title: Agricultural and Related Trades Percentage of Occupancies in Area: 15.41% Unfortunately, my attempt to showcase the d ...

javascriptjqueryhtmlajaxapi

Utilizing event delegation for JavaScript addEventListener across multiple elements

How can I use event delegation with addEventListener on multiple elements? I want to trigger a click event on .node, including dynamically added elements. The code I have tried so far gives different results when clicking on .title, .image, or .subtitle. ...

javascripthtmlcssevent-delegation