Sticking stars to the bottom of card div does not work out properly

Question

I have a card like this:

And the cards have this CSS:

.card {
    height:350px !important;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #ffffff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

label.star {
    padding: 5px 2px;
    margin-bottom: 0px;
    font-size: 18px;
    color: #444;
    transition: all .2s;
}

As you can see the stars are not placed in the bottom of div and their position depends on the length of the card title.

So I need to place and stick the stars at the bottom of the cards.

So I tried setting this css:

.card{
     position:relative;
}

label.star {
     position:absolute;
     margin-bottom:0px !important;
}

But the result goes like this:

So what's going wrong here?

How can I stick the stars of all divs to the bottom of the cards properly?

score 0 · Answer 1 · answered Aug 17 '22 at 06:42

There are a few issues with your code. In your first example, the stars are overflowing due to the fact that the text is allowed to also overflow. In the second, you are not positioning your stars with any of the position properties such as top, bottom, left, right, or inset.

.card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 350px;
    background-color: #ffffff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

figure{
  margin: 0;
  background-color: blue;
  width: 100%;
  height: 300px;
}

p{
  padding: 10px;
  text-align: center;
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
}

.star {
    padding: 5px 2px;
    font-size: 18px;
    color: #444;
    transition: all .2s;
}

<article class="card">
  <figure></figure>
  <p>
  "Lorem ipsum dolor sit amet, consectetur adipiscing   elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </p>
  <div class="star">
    * * * * *
  </div>
</article>

By using flexbox in addition to overflow: hidden you can guarantee a specific height with a flexible width for your element, whilst keeping your ratings/stars glued to the bottom of the element.

Additionally, label is a semantic HTML element intended to be used with inputs. You didn't share your HTML, so I can't tell if it's being used correctly here, but just in case I used div in my example.

Sticking stars to the bottom of card div does not work out properly

1 Answers1