Align to bottom with flexbox while having a float in place

Question

I have a picture, a title, a text, a date and a source. I want to position the image to the left and the source and date to the bottom. if there is too much text they will go under image and it's fine. but if there is too less. I want the date and source to go to the bottom next to the image like this:

 -------------------------------
|###########           heading 1|
|########### text text text text|
|########### text text text text|
|###########                    |
|###########                    | 
|###########  source        date|
 --------------------------------

or this:

 -------------------------------
|###########           heading 1|
|########### text text text text|
|########### text text text text|
|########### text text text text|
|########### text text text text| 
|########### text text text text| 
| text text text text text text |
| source                    date|
 --------------------------------

Everything works fine except that I can't get the source and date to go to bottom. I've tried so many solution but none have worked so far.

Here is my fiddle:

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, May 31 '18 at 10:57
[**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). — Paulie_D, May 31 '18 at 10:59
Maybe I can help you with that : http://jsfiddle.net/d0sgndo9/1/ — Bambou, Jun 01 '18 at 10:37
@KévinHuang you fiddle doesn't have the source-date thing at all! — ladybug, Jun 01 '18 at 11:11
@Fr33d0m I don't know how I can do it! can you post a solution or fiddle or something? — ladybug, Jun 01 '18 at 11:12

score 0 · Accepted Answer · answered Jun 01 '18 at 14:36

There are several ways that this layout can be achieved, this is just one quick solution that I think might help you (you might explore Grid and/or Flexbox for other layout solutions). It's a stripped down version of what you've provided but you should be able to easily insert any missing content into your markup.

For the most part, you really just need your source/date section inside it's own div to keep it on the bottom of the container.

Also, you should comb through your markup. It's a little messy in with some syntax errors. Your code editor, or fiddle should highlight these discrepancies.

Hope this helps!

.container {
  border: 1px solid black;
}

.clearfix {
  overflow: auto;
}

.header-link {
  text-decoration: none;
  color: green;
}

.img {
  float: left;
  margin: 20px 20px 10px;
}

.story-text {
  margin: 20px;
  
}

.source-date {
  float: right;
  margin: 20px;
  padding: 10px 20px;
  background: red;
}

<div class="container">
  <div class="clearfix">
    <img class="img" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Pineapple" width="170" height="170">
    <h3>
      <a class="header-link" href="/news/4/">بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است</a>
    </h3>
    <p class="story-text">بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین  بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این استمتن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است  بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است</p>
    <div class="source-date">
      31 مه 2018، ساعت 12:47
    </div>
  </div>
</div>

Align to bottom with flexbox while having a float in place

1 Answers1