We have the following CSS and HTML code:
[pastacode lang=”markup” manual=”%23header%20%0A%7B%0A%20%20height%3A%20150px%3B%0A%7D%0A%3Cdiv%20id%3D%22header%22%3E%0A%20%20%3Ch1%3EHeader%20title%3C%2Fh1%3E%0A%20%20Header%20content%20(one%20or%20multiple%20lines)%0A%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]- 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
Use CSS positioning.
[pastacode lang=”css” manual=”%2F*%20creates%20a%20new%20stacking%20context%20on%20the%20header%20*%2F%0A%23header%20%0A%7B%0A%20%20position%3A%20relative%3B%0A%7D%0A%2F*%20positions%20header-content%20at%20the%20bottom%20of%20header’s%20context%20*%2F%0A%23header-content%20%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20bottom%3A%200%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]- you need identify the header-content to make this work.
- This is one of the solution :
Html :
The solution just takes one <div>, which we call the “aligner”:
[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22bottom_aligner%22%3E%3C%2Fdiv%3E%20…%20Your%20content%20here%20…%20%0A” message=”html code” highlight=”” provider=”manual”/]- This trick works by creating a tall, skinny div, which pushes the text baseline to the bottom of the container.
Example Program for HTML :
[pastacode lang=”markup” manual=”%3Cbody%3E%0A%20%20%3Cdiv%20class%3D%22outer-container%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22top-section%22%3E%0A%20%20%20%20%20%20This%20text%0A%20%20%20%20%20%20%3Cbr%3E%20is%20on%20top.%0A%20%20%20%3C%2Fdiv%3E%0A%20%20%20%3Cdiv%20class%3D%22bottom-section%22%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22bottom-aligner%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22bottom-content%22%3E%0A%20%20%20%20%20%20%20%20I%20like%20it%20here%0A%20%20%20%20%20%20%20%20%3Cbr%3E%20at%20the%20bottom.%0A%20%20%20%20%20%3C%2Fdiv%3E%20%20%20%20%3C%2Fdiv%3E%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A” message=”html code” highlight=”” provider=”manual”/]Example Program for CSS :
[pastacode lang=”css” manual=”.outer-container%20%0A%7B%20%0Aborder%3A%202px%20solid%20black%3B%20height%3A%20175px%3Bwidth%3A%20300px%3B%20%7D%20%0A%0A.top-section%20%0A%7B%20%0Abackground%3A%20lightgreen%3B%20height%3A%2050%25%3B%20%0A%7D%0A%0A%20.bottom-section%20%0A%7B%0A%20background%3A%20lightblue%3B%20height%3A%2050%25%3B%20margin%3A%208px%3B%0A%20%7D%0A%0A%20.bottom-aligner%0A%20%7B%20%0Adisplay%3A%20inline-block%3B%20height%3A%20100%25%3B%20vertical-align%3A%20bottom%3B%20width%3A%203px%3Bbackground%3A%20red%3B%0A%20%7D%0A%20%0A.bottom-content%20%0A%7B%20%0Adisplay%3A%20inline-block%3B%0A%20%7D%20.top-content%20%0A%7B%20%0Apadding%3A%208px%3B%20%0A%7D%20%0A” message=”css code” highlight=”” provider=”manual”/]Sample Output:
- Set the height of the header div. Then inside that, style your H1 tag as follows:
Try with:
[pastacode lang=”css” manual=”div.myclass%20%0A%7B%20%0Amargin-top%3A%20100%25%3B%0A%20%7D%0A” message=”css code” highlight=”” provider=”manual”/]- try changing the % to fix it. Example: 120% or 90% …etc.