How to align content of a div to the bottom

Answer 1

After struggling with this same issue for some time, I finally figured out a solution that meets all of my requirements:

• Does not require that I know the container's height.
• Unlike relative+absolute solutions, the content doesn't float in its own layer (i.e., it embeds normally in the container div).
• Works across browsers (IE8+).
• Simple to implement.

The solution just takes one

, which I call the "aligner":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

... Your content here ...

This trick works by creating a tall, skinny div, which pushes the text baseline to the bottom of the container.

Here is a complete example that achieves what the OP was asking for. I've made the "bottom_aligner" thick and red for demonstration purposes only.

CSS:

.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;
}

HTML:

  

    

      This text
      
 is on top.
    
    

      

      

        I like it here
        
 at the bottom.
      
    
  

0 讨论(0)

查看其它26个回答

发布评论:

提交评论

---

•  加载中...