CODEWITHSUNDEEP
htmlcss
Julliard
Julliard

Reputation: 553

centre align container div and align text to bottom of div

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

My issue:

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;

}

Upvotes: 2

Views: 177

Answers (5)

Jo&#227;o Deroldo
Jo&#227;o Deroldo

Reputation: 465

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>

Upvotes: 5

Dhara Patel
Dhara Patel

Reputation: 74

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.

Upvotes: -1

Luuuud
Luuuud

Reputation: 4439

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>

Upvotes: 1

M S
M S

Reputation: 4093

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>

Upvotes: 0

Falguni Prajapati
Falguni Prajapati

Reputation: 129

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

Upvotes: 1

Related Questions