PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, November 16, 2022

[FIXED] How can I align an element (h3) at the bottom of a div?

 November 16, 2022     alignment, css, vertical-alignment     No comments   

Issue

I have two headers (h2 and h3) inside a div, and I want to align the second (h3) to the bottom of the div right above the bottom-border. I'm working with some inherited code, and the height is responsive, so can't be set. Here's the codepen. Here's the HTML:

 <div id="toc-texts">
  <div class="toc-entry">
    <h2>Title 1 That is Actually Really Long</h2>
    <h3 class="author">Author Name 1</h3>    
  </div>
   <div class="toc-entry">
    <h2>Title 2</h2>
    <h3 class="author">Author Name 2</h3>    
  </div>
   <div class="toc-entry">
    <h2>Title 3</h2>
    <h3 class="author">Author Name 3</h3>    
  </div>
 </div>

And here's the css I have so far:

div#toc-texts {
    display: inline;
  } 

div.toc-entry {
  text-align: center;
  border-bottom: 2px solid blue;
}

@media (min-width: 30em) {
  div#toc-texts {
    margin-bottom: 4rem;
    display: inline-grid;
    grid-template-columns: 9rem 9rem 9rem;
    grid-gap: 4em;
  }
  
}

How can I align the h3 to the bottom of the div in a way that works on all browsers and on mobile?


Solution

Use a flexbox column.

Push the h3 to the bottom with margin-top:auto and then align right.

div#toc-texts {
  display: inline;
}

div.toc-entry {
  text-align: center;
  border-bottom: 2px solid blue;
  display: flex;
  flex-direction: column;
}

h3.author {
  font-size: .9em;
  font-style: italic;
  margin-top: auto;
  text-align: right;
}

@media (min-width: 30em) {
  div#toc-texts {
    margin-bottom: 4rem;
    display: inline-grid;
    grid-template-columns: 9rem 9rem 9rem;
    grid-gap: 4em;
  }
}
<div id="toc-texts">
  <div class="toc-entry">
    <h2>Title 1 That is Actually Really Long</h2>
    <h3 class="author">Author Name 1</h3>
  </div>
  <div class="toc-entry">
    <h2>Title 2</h2>
    <h3 class="author">Author Name 2</h3>
  </div>
  <div class="toc-entry">
    <h2>Title 3</h2>
    <h3 class="author">Author Name 3</h3>
  </div>
</div>



Answered By - Paulie_D
Answer Checked By - Katrina (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

1,207,346

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © 2025 PHPFixing