Nikola Ivanovic Nikola Ivanovic - 2 months ago 12
CSS Question

How to fix/fit this div containters?

I created a Steam Inventory Viewer but some items have longer names.
If item have a little bit longer name, div containter will become bigger than the other ones (you can see demo at: freegamekeys.info/trade or image on: http://prntscr.com/crpqk5).
I dont know exactly how to explain my problem, so I linked you my website.

Any way to fix these div containters to be same as others?
Please note that I cant change images or names of items.

Thanks.

Answer

Just use

.card {
  max-height: 155px;
  min-height: 155px;
  padding: 10px;
  box-sizing: border-box;
}

in your CSS. If you want to vertically align their contents, you need a bit more CSS:

.card {
  max-height: 155px;
  min-height: 155px;
  padding: 10px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Don't forget to Autoprefix it. It will generate a lot more code, but it will look good on most browsers.

For example, a production version of the above CSS looks like this:

.card {
    max-height: 155px;
    min-height: 155px;
    padding: 10px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

And if you want to compensate for the pesky <br />s after images, just use

.card>img { margin-bottom: -10px; }