Positions in CSS

Question

I am making a blog posting site in Django. When users post something it looks great if the title of the post has 21 characters. If the title for instance has 35 characters it moves the author, date and thumbnail to the right and if less than 21 it moves it to the left. I don't want this scenario to happen!

This is how it currently looks

The HTML code

{% for post in posts %}
        <div class="blogpost">
        <a class="post-title"> {{post.title}} </a>
       <img class="thumbnail" src="{{post.author.imageURL}}"> 
        <a class="date-author">{{post.date}} - {{post.author}}</a>
        <br>
        <hr>
        <br>
        <div class="blogpost-content">{{post.context|linebreaks}}</div>
        <br>
        <br>
        <br>
    </div>

    <br>
{% endfor %}

The CSS code

.blogpost {
  /*Whole blogpost div*/
  border: 5px solid #149414;
  background-color: black;  
  color: #149414;
  width: 700px;
  margin:auto;
  border-radius: 40px;
  border-width: 1px;
}

hr{
  /*The middle line in the blogpost*/
  height: 1px;
  background-color: #149414;
  border: none;
}

.thumbnail{
  /*The author's image of the blogpost*/
  height: 120px;
  width: 120px;
  position: relative;
  right: -70px;
  bottom: 4px;
  border: 3px solid #149414;
  border-radius: 50%;
}

.blogpost-content{
  /*Content in the blogpost*/
  text-align: left;
  margin-left: 30px;
  margin-right: 30px;
}

.date-author{
  /*The date and author div in the blogpost*/
  font-size: 12;
  margin:10%;
}

.green_link{
  /*Green link to the random key*/
  color:#149414;
}

.post-title{
  font-size: 40px;
  margin: 10%;
}

I have tried following this video: https://www.youtube.com/watch?v=jx5jmI0UlXU but it doesn't seem to work for me. I think it has something to do with

position: relative;

but I am not sure.

Answer 1

This is one solution by applying width relative to the parent container on the post-title. Notice also that I have included the post-author-wrapper which includes the the img and the date inside. When you use right and bottom you have to have a position absolute to the element. You can also work with flexbox. This one explains flexbox great: https://css-tricks.com/snippets/css/a-guide-to-flexbox/. In this solution because I am floating the elements I add content on the before and after to clear the floats. The same you want to do with the hr:

https://jsfiddle.net/3qe1kcvx/

 <div class="blogpost">
   <a class="post-title">You can write whatever you want this will not affect the image because you gave a certain width to the post-title which is calculated according to the width of the parent container which is blogpost...</a>
   <div class="post-author-wrapper">
       <img class="thumbnail" src="{{post.author.imageURL}}"> 
       <a class="date-author">post.date - post.author</a>
   </div>
   <br>
   <hr>
   <br>
   <div class="blogpost-content">post.context|linebreaks</div>
   <br>
   <br>
   <br>
</div>

.blogpost {
  /*Whole blogpost div*/
  border: 5px solid #149414;
  background-color: black;  
  color: #149414;
  width: 700px;
  margin:auto;
  border-radius: 40px;
  border-width: 1px;
}
.blogpost::before, .blogpost::after {
  content: '';
  display: table;
  clear: both;
}

hr{
  /*The middle line in the blogpost*/
  height: 1px;
  background-color: #149414;
  border: none;
  clear: both;
}

.thumbnail{
  /*The author's image of the blogpost*/
  height: 120px;
  width: 120px;
  position: relative;
  border: 3px solid #149414;
  border-radius: 50%;
}

.blogpost-content{
  /*Content in the blogpost*/
  text-align: left;
  margin-left: 30px;
  margin-right: 30px;
}
.post-author-wrapper {
    width: 120px;
    padding: 15px;
    float: right;
    display: block;
}
.date-author{
  /*The date and author div in the blogpost*/
  font-size: 12;
  margin: 0 auto;
  display: block;
}

.green_link{
  /*Green link to the random key*/
  color:#149414;
}

.post-title{
    font-size: 40px;
    padding: 10px 30px 10px 30px;
    width: calc( 700px - 120px - 90px );
    display: block;
    float: left;
}

Answer 2

It may occur that the title is longer then calc( 700px - 120px - 90px ). In that case you can use the css ellipsis. For this, add the following to the css of the title

.post-title {
  white-space: nowrap; /* keep all on 1 line */
  overflow: hidden; /* no overflow */
  text-overflow: ellipsis; /* ellipsis the end of the title */
}