HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How To Align the Content of a Div to the Bottom with CSS[CODE]

in CSS
Reading Time: 2 mins read
425 27
0
622
SHARES
2.8k
VIEWS
Share on FacebookShare on Twitter

(Video transcription)

Creating the Markup

Here on the HTML document.
Let’s create the parent div element with a class of “container.”

RelatedPosts

CSS How to Snap to the Next Section on a Single Scroll (CODE)

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

CSS Tricks: Expand Card on Hover Effect (Game of Thrones theme | CODE INSIDE)

Inside this container will be another two div elements.

For the first one, let’s add a class of main content.

The second one will be the bottom content.

I’m going to add some dummy content to both of them.

As you notice, we wrap our content with the div elements. It is important so we can move them together rather than selecting each inline element.

Adding the CSS

For the container, add a maximum width. A margin, padding, and border so we could see its actual dimension for demo purposes only.

The same with the bottom content.

Now, we want to pull this bottom content div to the bottom.
So we need to add an absolute position CSS to this div element. But before that, make sure to add a “position relative” CSS to the parent element. So it doesn’t go outside our div, which is the “container.”

Positioning using CSS

Then, we can add position absolute. Bottom zero, Left zero. So there’s no space left.
You could also align this to the right with “right zero.” Remove the left zero.
Or align it to the bottom center by adding margin auto with left zero.

Full HTML and CSS Code

<div class="container">
        
        <div class="main_content">
            <h1 class="large_title">Lorem Ipsum Dolor Sit Amet,Consectetur Adipiscing Elit</h1>
        </div>
        
        <div class="bottom_content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. sint occaecat cupidatat non proident.</p>
        </div>
    
 </div>
*{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: 'Open sans', sans-serif;
    font-size: 18px;
    background-color: #e9e9f5;
}
.large_title{
    font-size: 4em;
    color: #06004b
}
p{
    font-size: 1.5em
}
.container{
    max-width: 1200px;
    margin: 40px auto;
    padding: 15px;
    border: 15px solid #66e3f3;
    border-radius: 5px;
    min-height: 90vh;
    
    position:relative
}
.bottom_content{
    background: #d0ccff;
    padding: 15px;
    max-width: 500px;
    border: 15px solid #ada6ff;
    border-radius: 5px;
    position:absolute;
    
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    
}

 

Tags: css beginnercss positioning
Share249Tweet156Share62

Related Posts

CSS How to Snap to the Next Section on a Single Scroll
CSS

CSS How to Snap to the Next Section on a Single Scroll (CODE)

by 22bulbjungle
May 2, 2021
0

This method works either on scroll up or on scroll down. Normally, this is how you scroll down a webpage. In this...

Read more
How to Create CSS Blurred and Opacity(Transparent) Background

How to Create CSS Blurred and Opacity(Transparent) Background[CODE]

April 12, 2021
Window cards expand on hover with CSS

CSS Tricks: Expand Card on Hover Effect (Game of Thrones theme | CODE INSIDE)

March 3, 2021
How To Create an Overlay Zoom Effect in CSS

How To Create an Overlay Zoom Hover Effect in CSS [CODE]

September 21, 2020
How to Get Paypal API Credentials (Username, Password, Signature)

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

March 27, 2022
Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

February 22, 2022
How To Set SEO Meta Title and Description in Duda Builder

How To Set SEO Meta Title and Description in Duda Builder

January 26, 2022
How To Improve Customer Experience by Preloading Internal Links in Your Shopify Store

How To Improve Customer Experience by Preloading Internal Links in Your Shopify Store

December 8, 2021
How To Set Custom Metadata (meta title and meta description) on the Shopify Home Page

How To Set Custom Metadata (meta title and meta description) on the Shopify Home Page

November 7, 2021
Fix Post-processing of the image failed likely because the server is busy or does not have enough resources. Uploading a smaller image may help. Suggested maximum size is 2500 pixels.

How to Fix WordPress Image Upload Failed Error

June 6, 2021

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Recent Tutorials

How to Get Paypal API Credentials (Username, Password, Signature)

[UPDATED 2022] How to Get Your PayPal API Credentials (Username, Password, and Signature to Woocommerce)

March 27, 2022
Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

Best Tools for Publishing Post Content (on WordPress, Shopify, Page Builders)

February 22, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • Javascript
  • PC Tips
  • Photoshop
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.