Toby Toby - 2 years ago 93
CSS Question

How to fix the position of a paragraph

Fiddle And this is my code:



.recommendedmovies {
overflow: auto;
white-space: nowrap;
text-align: center;
}

.moviescard {
width:185px;
list-style-type:none;
display:inline-block;
height:450px;
vertical-align: top;
white-space: normal;
}

.movierating {
}

<div class="recommendedmovies">
<ol>
<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/imekS7f1OuHyUP2LAiTEM0zBzUz.jpg" width="217px" height="325px" />
<p class="moviename">Wonder Woman</p>
<p class="movierating">8/10</p>
</li>
<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/xbpSDU3p7YUGlu9Mr6Egg2Vweto.jpg" width="217px" height="325px" />
<p class="moviename">Pirates of the Caribbean: Caribbean: Dead Men Tell No Tales </p>
<p class="movierating">6/10</p>
</li>
<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/2n4x2FRcmMIsHxcucxvWxb0Yry6.jpg" width="217px" height="325px" />
<p class="moviename">War for the Planet of the Apes</p>
<p class="movierating">5/10</p>
</li>
</ol>
</div>





I want to make the rating's below the movie name, stay in a single line, like shown in the screenshot (on imaginary red line).

Let me know, if you need more information, thanks.

enter image description here

Answer Source

Set .moviescard position to relative (the context), and position the .movierating absolutely to the bottom of the card.

.recommendedmovies {
  overflow: auto;
  white-space: nowrap;
  text-align: center;
}

.moviescard {
  position: relative;
  width: 185px;
  list-style-type: none;
  display: inline-block;
  height: 450px;
  vertical-align: top;
  white-space: normal;
}

.movierating {
  position: absolute;
  bottom: 0;
  width: 100%;
}
<div class="recommendedmovies">
  <ol>
    <li class="moviescard">
      <img class="lazy" src="http://image.tmdb.org/t/p/w185/imekS7f1OuHyUP2LAiTEM0zBzUz.jpg" width="217px" height="325px" />
      <p class="moviename">Wonder Woman</p>
      <p class="movierating">8/10</p>
    </li>


    <li class="moviescard">
      <img class="lazy" src="http://image.tmdb.org/t/p/w185/xbpSDU3p7YUGlu9Mr6Egg2Vweto.jpg" width="217px" height="325px" />
      <p class="moviename">Pirates of the Caribbean: Caribbean: Dead Men Tell No Tales </p>
      <p class="movierating">6/10</p>
    </li>


    <li class="moviescard">
      <img class="lazy" src="http://image.tmdb.org/t/p/w185/2n4x2FRcmMIsHxcucxvWxb0Yry6.jpg" width="217px" height="325px" />
      <p class="moviename">War for the Planet of the Apes</p>
      <p class="movierating">5/10</p>
    </li>



  </ol>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download