I have the following CSS:
.course-content {
padding-top: 22px;
padding-bottom: 30px;
}
And within the loop in PHP, I look for the database records. And it looks like this:
With this, I noticed that it came in different sizes. How can I standardize sizes? I would not like to set a FIXED size for the height.
I do not know if it will serve you exactly, but there is a CSS-only solution that can help you with that.
Using FlexBox you can set auto height pro Container . So it will grow by the size of the div daughter that has the highest content. And the "sisters" divs will follow the height of the "sister" higher.
See the example to understand better.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 12px
}
.container {
max-width: 600px;
margin: 20px auto;
display: flex;
border: 1px solid #ccc;
}
.item {
margin: 5px;
padding: 0 10px;
background: tomato;
text-align: center;
font-size: 1.5em;
flex: 1;
}
h4 {
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}<h4>A altura do .container eh definida pelo tamanho do conteúdo da maior div filha</h4>
<section class="container">
<div class="item flex">Teste 1</div>
<div class="item flex">Teste 2 Teste 2</div>
<div class="item flex">Teste 3 Teste 3 Teste 3</div>
<div class="item flex">Teste 4 Teste 4 Teste 4 Teste 4 Teste 4</div>
</section>
<section class="container">
<div class="item flex">Teste 1</div>
<div class="item flex">Teste 2 Teste 2</div>
<div class="item flex">Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4</div>
<div class="item flex">Teste 3 Teste 3 Teste 3</div>
</section>A good tutorial on FlexBox: link