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”]

Categorized in:

CSS

Tagged in:

, , , , , , , , , , , , , , ,