centre align container div and align text to bottom of div

Question

What I am trying to achieve: center a container div (that contains two divs) and in 2nd div, bottom align text

in my 1st div, it's a picture

in my 2nd div, two paragraphs of text

              ———————-----
              |          |
              |          |       column2
              | column1  |  -———————-------
              | picture  |  | Paragraph   |
              |          |  ———————--------
              |          |   ———————————------------------
              |          |  | a paragraph of text        |
              |          |  | of text of text of text of |
              ——————----——   ———————----------------------

My issue:

I can't align my two paragraphs to be at the bottom. They are at the top.
My container div isn't aligned to the center too

Currently they look like this:

    ———————-----    -———————-------
   |    picture  |  | Paragraph   |
   |             |  ———————--------
   |             |   ———————————------------------
   |             |  | a paragraph of text        |
   |             |  | of text of text of text of |
   |             |   ———————----------------------
   |             |
   |             |
   |             |
    ------------

My current code:

<body>
  <div class="container">
    <div class="img column1">
      <img id="img" src="https://animage.jpg">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
    </div>
  </div>
</body>



.column1, .column2{
  width:300px;
  float: left;
  margin: 10px;
}
#img{
  max-width: 300px;
  max-height: 600px;
}
.container {
  width: 80%;
  padding-top: 100px;
  margin: 0 auto;

}

Possible duplicate of [How to align content of a div to the bottom?](https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom) — Rob, Nov 30 '18 at 11:07

score 5 · Answer 1 · edited Nov 30 '18 at 11:14

5

Changing your align method to Flex, you could achieve this easy, take a look bellow

Just removed float: left on the column elements and added display: flex and align-items: flex-end at the container.

.column1, .column2{
  width:300px;
  margin: 10px;
}
#img{
  max-width: 300px;
  max-height: 600px;
}
.container {
  width: 80%;
  padding-top: 100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
}

<body>
  <div class="container">
    <div class="img column1">
      <img id="img" src="https://placeimg.com/200/200/any">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
    </div>
  </div>
</body>

edited Nov 30 '18 at 11:14

Luuuud

3,720
1
23
34

answered Nov 30 '18 at 10:23

João Deroldo

455
4
9

This should be the correct answer. Maybe explain why you use that method. +1 – A. Meshu Nov 30 '18 at 10:52
@KwokWenJian but this picture show what you expected on the question, align the text at bottom. – João Deroldo Nov 30 '18 at 16:07

score 1 · Accepted Answer · answered Nov 30 '18 at 10:59

.container{display:flex;}
.column1, .column2{
  width:200px;
 
  margin: 10px;
  border:solid 1px #ccc;
  flex-direction:column;
  
}
.column2{

justify-content:flex-end;
display:flex;
}
#img{
  max-width: 100%;

}
p{ margin:0;}
.container {
  width: 80%;
  padding-top: 100px;
  margin: 0 auto;

}

  <div class="container">
    <div class="img column1">
      <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAdVBMVEXMzMwAAADPz8/S0tLU1NS4uLjDw8OMjIyrq6vHx8ezs7OmpqbBwcHX19dRUVGampp2dnavr69jY2OdnZ1eXl4aGhp+fn5sbGynp6dKSkp4eHg6Ojp/f39ERERmZmYhISEoKCgNDQ2Tk5NXV1cuLi43NzctLS2IdN5EAAAE4ElEQVR4nO3Ye3uqOBAHYCYJIILcrTfwAtrv/xF3wi1E291297T6PPt7/+jxoEYymSRDHAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf0RIJsTdxYcPfLvZv23i37X5Q4QTpmWZJpF1h14TTK9VtucPbJ3v3bFwm+kLyks2ZZ4WjpyuuFVepkXwElGQxYUOZXsjWs7uR9TkDv8VUU3rtrzRefmdGxYBkRpfp0R1nh+Imv6ScEqiuDzQpZCfN/FbVEUbT0mlROjNrvJNDzEQ3nq9WPEn3AN9JwiynmIgd9QIJaUK9uT3fa4pUdymV9LzgyBC8oc7nWdBRtUYA1lSJPv338/qoYHPKJ/ehhiIgorhixzbSLdZ0aK7IkRL3mdN/BZxblePFz1K3SEGwh2HzhFLSr6aCBzFohliII/raawDKnQTtJmiSfsnJwKngfvYLRWf1HJ4Q77RtDjKw26WCPNl/35TcZx1vvLHGJQmf1Y8K3RiTLNK5fT15PoRMq+l7oHVB+mTK8cYqGs8jdM8Ho7ThuaNZmMPpirXuplhLvjT1zg9uPcyN4nB8fhgFH6Tuux5qXKLpHDUeCdd9ospD2a5ylljVkVxpMXwjkootWIgE/6gGGPg8NQaoiEOtdDLZTyNPf/alyfYz4goFBXR6Uy0m+oDvUSMMbBukS8uzP2uNkMQuMeVlc8i0gutiYEsqAyU4GCf17ogCNazNcAj/6kx4NTMDpR4vJkX62GM1UZn7hQDq9uRNWayDwJnwZs9peWhm2G+qQ+WByoTf0dpVxMF825bAXkCsaVz3a8FQlxJ/ytDysQsBtk8BgE18zHjTNjKhyxw1L6b//MYKA4Cy93ux+yhP2+eG4OQaKxWOesrqau7vb7zL8Wgy4SC3uw+8FfC7qtTDIRbU5oFUdFSrX/u1WKQTmOodjflqLruC6IvzAW24nryLgs4UH2bUwy4jdzRj0dCue8X7/XmQjHdjUwvAVd3/dL48ZpoJYXGawFt7Ris2vd+dvHeOJRf13aaFAGV0u529Pw1MTQxqMjLqAk8LVhQxq/03ph+vpfzWuCnFM7HkUd/OTThk8N/9Y+Yb0ldQMt6N98bi6fGQM9MU+ikF/18Z4kcdZvVSNW8RuqyoFK8j8yDoA52C1fJUTGd7ArTuxopem4M1Nn0UMU35S5GDSX8965WvsXzvJf9pmgHQSzHFrKU+HVXK5nviITjatfKl2fXytU0ClzY8AIvBrpW7o6W5s9MW2tJVI3eSJyHIIx4bVnpIpyXlq05TDnqhTKg47hleE9/ZuLJEPdFslDtPNGnWpmL+/HZWZxOs9sVzVQa6SA85rPZFw6ncQOWWbe8cOizfu+QL/DszGXszl0ptXJjqx8mBryKX0LFn1jenaFcTV2gNrfHhDYxcOkcyu4Mxae6v1RTI7nRqH2BMxSuC9d0jeMznTLrPNHEQAQ7WsfxO53uHvDEhy/NNVMjeTE/j5Tllcwmc6TLrr0Rh/dP9eQ/EGKR5se3xd0Zb1CYmSGXVV7u7z/xj1yz6Sk32eT5vghmZ6r+sUzDb57T/piPT7n/wDm4dcjycLYuXuhsHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Nf8BZyMMUIZKGmqAAAAAElFTkSuQmCC">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
       <p>another paragraph</p> <p>another paragraph</p>
    </div>
  </div>

Thank you! it works! however, there's a little gap between img and the bottom border. why so? i don't see any padding in your column2 code :? — Julliard, Dec 01 '18 at 04:54

score 1 · Answer 3 · answered Nov 30 '18 at 11:07

The easiest and probably nicest solutions for this is using a "flexible box layout". In the snippet below I've layed out an example you could use. I recommend reading more on flexbox, since it can most definitely help you again with future layout issues:

A Complete Guide to Flexbox on css-tricks.com

CSS Flexible Box Layout on MDN

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
   
  /* just for presentation */
  padding: 1em;
  border: 1px solid black;
}

.column--picture{
  flex: 0 0 auto;
  
  /* up to you */
  width: 200px;
  height: 400px;
}

.column--picture img{
  /*
   make sure to limit the size of the image,
   or make `.column--picture` to not show
   overflow content
  */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.column--wrapper{
  flex: 0 1 auto;
  
  /* just for presentation */
  max-width: 400px;
}

.row{
  /* just for presentation */
  margin-left: 1em;
  padding: 1em;
  border: 1px solid black;
}

<div class="container">
  <div class="column column--picture">
    <img src="https://images.unsplash.com/photo-1458966480358-a0ac42de0a7a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjI2ODUxfQ&s=b92b03976bc401ad70337cfd39e9ed95" alt="green leaf tree on shore">
  </div>
  <div class="column column--wrapper">
    <div class="row">
      <h2>Stop floating and start flexing.</h2>
    </div>
    <div class="row">
      <p>Turkey beef biltong, sausage ball tip pork loin pork chop corned beef boudin ground round salami pancetta flank filet mignon sirloin.</p>
    </div>
  </div>
</div>

Thanks! how do i keep the photo flex end as well? I tried to set img width to 100% and it shot upwards and is stuck to the ceiling :/ i did this: display: block; max-width: 100%; height: auto; width: auto; object-fit: cover; https://imgur.com/a/oM6jHx7 — Julliard, Dec 01 '18 at 04:09

score 0 · Answer 4 · answered Nov 30 '18 at 11:02

You can use flexbox to achieve this. If you are trying to be compatible with older browser (eg IE 10 ), This may not work. Flexbox is the better way to align items.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  justify-content: center;
}

.container img {
     height: 180px;
}

.container .column2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<body>
  <div class="container">
    <div class="img column1">
      <img 
  id="img"src="https://upload.wikimedia.org/wikipedia/en/5/58/Penny_test.jpg">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
    </div>
  </div>
</body>

it works if "another paragraph" was short. but if it was a sentence long, it runs on and pushes the image to the left :/ — Julliard, Nov 30 '18 at 16:08

score -1 · Answer 5 · edited Nov 30 '18 at 11:12

-1

Add this code in your CSS.

.column1, .column2 {
  width:300px;
  margin: 10px;
  display: inline-block;
  vertical-align: bottom;
}
p {    
  margin-top: 0;
  margin-bottom: 0;    
}

Please see this link for your solution.

edited Nov 30 '18 at 11:12

Luuuud

3,720
1
23
34

answered Nov 30 '18 at 10:45

Dhara Patel

74
5

centre align container div and align text to bottom of div

5 Answers5