{"id":1073,"date":"2017-03-20T12:05:30","date_gmt":"2017-03-20T06:35:30","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1073"},"modified":"2017-03-29T12:09:24","modified_gmt":"2017-03-29T06:39:24","slug":"align-content-div-bottom","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/align-content-div-bottom\/","title":{"rendered":"[ Solved -5 Answers]CSS- HTML- How to align content of a div to the bottom"},"content":{"rendered":"<p><label class=\"label label-info\">PROBLEM:<\/label><\/p>\n<p>We have the following CSS and HTML code:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>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 \u201csticks\u201d to the bottom of the header section.<\/li>\n<li>So if there is only one line of text it would be like:<\/li>\n<\/ul>\n<p>Header title<\/p>\n<p>\u00a0<\/p>\n<p>\u00a0<\/p>\n<p>header content (resulting in one line)<\/p>\n<ul>\n<li>And if there were three lines:<\/li>\n<\/ul>\n<p>Header title<\/p>\n<p>header content (which is so much stuff that it perfectly spans over three lines)<\/p>\n<ul>\n<li>How can this be done in CSS?<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>Relative+absolute positioning<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23header%20%0A%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20min-height%3A%20150px%3B%0A%20%20%7D%0A%20%20%23header-content%20%0A%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20bottom%3A%200%3B%0A%20%20%20%20left%3A%200%3B%0A%20%20%7D%0A%3Cdiv%20id%3D%22header%22%3E%0A%20%20%3Ch1%3ETitle%3C%2Fh1%3E%0A%20%20%3Cdiv%20id%3D%22header-content%22%3ESome%20content%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<p>Use CSS positioning.<\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u2019s%20context%20*%2F%0A%23header-content%20%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20bottom%3A%200%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>you need identify the header-content to make this work.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cspan%20id%3D%22header-content%22%3Esome%20header%20content%3C%2Fspan%3E%20%0A%0A%3Cdiv%20style%3D%22height%3A100%25%3B%20position%3Arelative%3B%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%3Cdiv%20style%3D%22height%3A10%25%3B%20position%3Aabsolute%3B%20bottom%3A0px%3B%22%3Ebottom%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%20%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>This is one of the solution :<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%23header%20%0A%7B%0A%20%20display%3A%20table-cell%3B%0A%20%20vertical-align%3A%20bottom%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<h4 id=\"html\"><span style=\"color: #800080;\"><b>Html :<\/b><\/span><\/h4>\n<p>The solution just takes one <div>, which we call the \u201caligner\u201d:<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Cdiv%20class%3D%22bottom_aligner%22%3E%3C%2Fdiv%3E%20\u2026%20Your%20content%20here%20\u2026%20%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>This trick works by creating a <b>tall, skinny div, <\/b>which pushes the text baseline to the bottom of the container.<\/li>\n<\/ul>\n<h4 id=\"example-program-for-html\"><span style=\"color: #ff6600;\"><b>Example Program for HTML :<\/b><\/span><\/h4>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"example-program-for-css\"><span style=\"color: #800080;\"><b>Example Program for CSS :<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d.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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"sample-output\"><span style=\"color: #ff6600;\"><b>Sample Output:<\/b><\/span><\/h4>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"size-medium wp-image-1090 aligncenter\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/op-300x182.png\" alt=\"\" width=\"300\" height=\"182\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/op-300x182.png 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/op.png 319w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<ul>\n<li>Set the height of the header div. Then inside that, style your H1 tag as follows:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dfloat%3A%20left%3B%0Apadding%3A%2090px%2010px%2011px%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<h4 id=\"try-with\"><span style=\"color: #808000;\"><b>Try with:<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201ddiv.myclass%20%0A%7B%20%0Amargin-top%3A%20100%25%3B%0A%20%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>try changing the % to fix it. Example: 120% or 90% \u2026etc.<\/li>\n<\/ul>\n[ad type=\u201dbanner\u201d]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: We have the following CSS and HTML code: [pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] 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 \u201csticks\u201d to [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[2238,2240,1715,2232,2239,2230,2233,2229,2228,2237,2236,2235,2234,1713,715,2231],"class_list":["post-1073","post","type-post","status-publish","format-standard","hentry","category-css","tag-align-div-to-bottom-of-div","tag-align-div-to-bottom-of-page","tag-align-div-to-bottom-of-parent","tag-align-headline-to-bottom-of-div-with-equalizer","tag-align-text-to-bottom-of-div-bootstrap","tag-aligning-an-element-to-the-bottom-of-its-container","tag-aligning-header-elements-to-bottom","tag-css-align-contents-of-div-to-the-bottom","tag-html-how-to-align-content-of-a-div-to-the-bottom","tag-html-text-align-bottom","tag-text-align-bottom-css","tag-text-at-bottom-of-div","tag-understanding-csss-vertical-align-property","tag-vertical-align-bottom-not-working","tag-vertical-align","tag-vertical-align-all-you-need-to-know"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1073"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1073\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}