Positioning a box at the bottom rather than at the top

I am on the lookout for a solution to shift/arrange divs to the bottom instead of the top. For example, when attempting to delete some of the divs with the "box" class in this code snippet:

Current code: 

#holder {
    height: 220px;
    width: 50px;
    background-color: #000000;
    padding: 5px 10px 10px 10px;
}

.box {
    height: 50px;
    width: 50px;
    background-color: #ffffff;
    margin-top: 5px;
}

Currently, removing a div removes it from the bottom. I would like to invert this behavior so that it removes from the top instead.

http://jsfiddle.net/79L7Lud7/

htmlcss

Answer №1

Elements on a page typically move in a top to bottom, left to right flow.

To change this flow, you can remove elements from the normal layout and use positioning, such as absolute positioning.

For instance:

#holder {position: absolute; bottom: 0;}

The only additional thing needed with this method is an outer holder to maintain the space on the page.

http://jsfiddle.net/79L7Lud7/4/

Answer №2

Typically, elements align themselves to the top of other elements. However, if you need to align to the bottom, you can treat the containing element as a table and use CSS to achieve this alignment. 

#holder {
    display:table-cell;
    vertical-align: bottom;

    height: 220px;
    width: 50px;
    background-color: #000000;
    padding: 5px 10px 10px 10x;

}

For more information and a live example, please visit http://jsfiddle.net/79L7Lud7/3/.

Keep in mind that this method may not be supported in older browsers like IE7. In those cases, consider using absolute positioning instead.

Learn more about absolute positioning within relative positioning at https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Also, here is the direct link to the fiddle: http://jsfiddle.net/79L7Lud7/3/

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 sign out option fails to erase the data stored in Local Storage

After implementing a login feature that stores a token in local storage, I encountered an issue with the logout button. The intention was for the button to delete the token from local storage and set the user to null upon clicking it. However, this functio ...

htmlangulartypescript

Ways to customize bullet points?

Is there a way to customize the bullet points in HTML? All my bullet points are displaying as stars instead of the standard black circle for the main bullets and a hollow circle for the sub-bullets. I attempted to set the style using list-style-type:disc ...

htmlvbaoutlook

Tips on adjusting the body or HTML to fill the entire page

Currently, I am designing the homepage using the bootstrap Cover page template. The images displayed are just placeholders. While the site functions perfectly on desktop screens, resizing it to smaller sizes causes the grid layout to collapse into a single ...

htmlcssbootstrap-5

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

htmlcss

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

javascriptangularjshtmlaccessibilityvoiceover

Explore the world of HTML by uncovering both the tags and

I am currently focused on enhancing a table I created to allow sorting rows in both ascending and descending order, as well as the ability to rearrange columns through click-and-drag functionality. While the basic structure is working, I am seeking to refi ...

jqueryhtml

Modify the size of a div based on the status of a checkbox using only HTML and CSS

Here is a small project that I created using only HTML & CSS. The goal is to modify the properties of the <div class="pro"> when the checkbox is checked. When this happens, all other <div class="pro"> elements should be hidden and the <art ...

htmlcsscheckbox

How to extract JSON data from an HTTP request in Java

I'm seeking to scrape data from a specific link using a Java program. The initial page is not an issue, but when attempting to gather data from subsequent pages, the source code remains the same as on the first page. The vital information I require is ...

javahtmljsonhttprequest

The Ng-include tag does not provide highlighting for its text

Within an ng-include template, I have a div that is not highlighting when hovered over. Although the cursor changes to a pointer when hovering over the text, attempting to click and drag to highlight it results in nothing happening. This issue is signific ...

htmlcssangularjsangularjs-ng-include

Tips for Improving the Naming Conventions of CSS Modules

I currently have the following setup in my webpack.config.js: { test: /\.css$/, use: [ {loader: "style-loader"}, { loader: "css-loader", options: { modules: true, importLoaders: 1, s ...

csswebpackcss-modules

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

htmlcss

Creating Positioning Magic with HTML Elements

Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development. The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of th ...

javascriptjqueryhtmlcssasp.net

Mobile devices are not showing the fixed header correctly

Recently, I was requested to lend a hand with a certain website: www.backincontrolbook.com Interestingly, when viewed on a PC browser, everything appears as intended. However, switching over to a mobile device (iPad and iPhone specifically), the header de ...

htmlwordpressmobileheader

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

htmlcsssassbootstrap-5

Jquery refuses to conceal a particular element

I've encountered this issue before, but I'm facing a problem this time. I'm attempting to create a popup that is initially hidden. When clicked, the popup does appear, but I'm unable to close it. Additionally, when trying to change the ...

javascriptjqueryhtmlcss

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml

What is the best way to superimpose text on a variety of images with varying sizes using CSS

I have a client who is requesting a sold text to be displayed on top of all images that have been sold, positioned in the bottom left corner of each image. While I have successfully implemented this feature, the issue arises when dealing with images of var ...

htmlcssoverlayimage-size

What could be causing my function to fail <object>?

Within index.php, I am calling the function twice, which includes chart.html. index.php chart_line($valuesNight); //first call chart_line($valuesEvening); //second call ?> <?php function chart_line($jsonDataSource){ ?> < ...

javascriptphphtml

Customize scaffolding.less for the body element

Recently, I've been putting together a webpage and decided to incorporate Bootstrap into the design. However, after adding Bootstrap, I noticed that it changed the background color of the body on my site. I have included a link to the fiddle below for ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to create a fixed footer in Next.js using React?

I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...

javascripthtmlcssreactjsnext.js