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: 2min read
378 24
0
552
SHARES
2.5k
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

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

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

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

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
Share221Tweet138Share55

Related Posts

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

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

by Content Editor
April 12, 2021
0

(Video transcription) Here on my screen on the left, I have my HTML document and on the right is the live browser...

Read more
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 create news ticker horizontal- scrolling text

How to Create a Horizontal News Ticker with CSS Only (Scrolling Texts | CODE)

March 3, 2021
How to Create CSS Blurred and Opacity(Transparent) Background

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

April 12, 2021
How to align content of a div to the bottom

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

April 12, 2021
How To Setup StackPath CDN With Your WordPress Website

How To Setup StackPath CDN With Your WordPress Website

March 24, 2021
How to Add Custom CSS and JavaScript File in Shopify

How to Add Custom CSS and JavaScript in Shopify (EASY)

March 24, 2021
How To Add Checkout Autofill or Autocomplete Address on the Address Field in WooCommerce

How To Add Checkout Autofill/Autocomplete Address on the Address Field in WooCommerce

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

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

March 31, 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 News

How to Create CSS Blurred and Opacity(Transparent) Background

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

April 12, 2021
How to align content of a div to the bottom

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

April 12, 2021

Categories

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

© 2021 22BulbJungle.

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

© 2021 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

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.