Close

Type and hit Enter to search

Popular Searches:
Nature Musical Guide
CSS

[ Solved -5 Answers]CSS- HTML- How to align content of a div to the bottom

By Wikitechy Editor
March 20, 2017 2 Min Read
75 0

Table Of Content

We have the following CSS and HTML code:

html code 
#header 
{
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>
  • The header section is fixed height, but the header content may change. We would like to content of the header to be vertically aligned to the bottom of the header section, so the last line of text “sticks” to the bottom of the header section.
  • So if there is only one line of text it would be like:

Header title

 

 

header content (resulting in one line)

  • And if there were three lines:

Header title

header content (which is so much stuff that it perfectly spans over three lines)

  • How can this be done in CSS?

  • Relative+absolute positioning
css code 
#header 
{
    position: relative;
    min-height: 150px;
  }
  #header-content 
{
    position: absolute;
    bottom: 0;
    left: 0;
  }
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>
[ad type=”banner”]

Use CSS positioning.

css code 
/* creates a new stacking context on the header */
#header 
{
  position: relative;
}
/* positions header-content at the bottom of header's context */
#header-content 
{
  position: absolute;
  bottom: 0;
}
  • you need identify the header-content to make this work.
html code 
<span id="header-content">some header content</span> 

<div style="height:100%; position:relative;">                                              
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

  • This is one of the solution :
css code 
#header 
{
  display: table-cell;
  vertical-align: bottom;
}
[ad type=”banner”]

Html :

The solution just takes one <div>, which we call the “aligner”:

html code 
<div class="bottom_aligner"></div> ... Your content here ...
  • This trick works by creating a tall, skinny div, which pushes the text baseline to the bottom of the container.

Example Program for HTML :

html code 
<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
   </div>
   <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
     </div>    </div>  </div>
</body>

Example Program for CSS :

css code 
.outer-container 
{ 
border: 2px solid black; height: 175px;width: 300px; } 

.top-section 
{ 
background: lightgreen; height: 50%; 
}

 .bottom-section 
{
 background: lightblue; height: 50%; margin: 8px;
 }

 .bottom-aligner
 { 
display: inline-block; height: 100%; vertical-align: bottom; width: 3px;background: red;
 }
 
.bottom-content 
{ 
display: inline-block;
 } .top-content 
{ 
padding: 8px; 
}

Sample Output:

  • Set the height of the header div. Then inside that, style your H1 tag as follows:
css code 
float: left;
padding: 90px 10px 11px

Try with:

css code 
div.myclass 
{ 
margin-top: 100%;
 }
  • try changing the % to fix it. Example: 120% or 90% …etc.
[ad type=”banner”]
Total
0
Shares
Share 0
Tweet 0
Pin it 0
Share 0

Tags:

Share Article

Author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

Follow Me
Other Articles
No Comment! Be the first one.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Scroll

Our site uses cookies. By using this site, you agree to the Privacy Policy and Terms of Use.

Accept