How can i make it tidy? - html

Question

the work waiting to be done
I want them to be fixed on size; like a table without shared borders.
Here s my html and css codes:
.leftsubstancelist {
padding-top: 40px;
border-top: 2px solid #003333;
width: 39%;
float: left;
}
.rightsubstancelist {
padding-top: 40px;
border-top: 2px solid #003333;
width: 39%;
float: right;
}
.leftsubstancelist figure {
border: 3px solid #003333;
}
.rightsubstancelist figure {
border: 3px solid #003333;
}
figure img {
max-width: 80%
}
<section class="leftsubstancelist">
<figure>
<img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
<br>
<figure>
<img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
</section>
<section class="rightsubstancelist">
<figure>
<img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
<figcaption>Ertapenem</figcaption>
</figure>
<br>
<figure>
<img src="img/active_substance/teikoplanin.png" alt="Teikoplanin" align="center">
<figcaption>Teikoplanin</figcaption>
</figure>
</section>
I ve tried, display:box, align:center and some other related stuff but couldn't manage to tidy them up.
Thanks for your help!

Answer 1

Use flexbox.
When you want all rows to be of a continuous height, you could leave out align-items or set it to stretch. Otherwise you could use align-items: flex-start when you want them to have an individual height but rendered at top.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
display: flex;
justify-content: space-between;
/* Uncomment the following line, if the
rows cell can have different heights */
/* align-items: flex-start; */
flex-wrap: wrap;
border-top: 2px solid #003333;
padding: 20px;
}
figure {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 3px solid #003333;
width: calc( 50% - 40px );
margin: 20px;
}
figure img {
width: 100%;
height: auto;
}
<section>
<figure>
<img src="http://via.placeholder.com/320x140" />
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x160" />
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x180" />
<figcaption>Ertapenem</figcaption>
</figure>
<figure>
<img src="http://via.placeholder.com/320x120" />
<figcaption>Teikoplanin</figcaption>
</figure>
</section>

Answer 2

Try below:
<style>
.divSquare1{
width:45%; height:200px; margin:4px; border:1px solid black; float: left
}
.divSquare2{
width:45%; height:200px; margin:4px; border:1px solid black; float: right
}
.space{
width:5%;
}
</style>
<div class="divSquare1">
<figure>
<img src="img/active_substance/vankomisin.png" alt="Vankomisin Hidroklorür" align="center">
<figcaption>Vankomisin Hidroklorür</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
<img src="img/active_substance/imipenem_silastatin.png" alt="İmipenem / Silastatin" align="center">
<figcaption>İmipenem / Silastatin</figcaption>
</figure>
</div>
<div style='clear:both' class="space"></div>
<div class="divSquare1">
<figure>
<img src="img/active_substance/ertapenem.png" alt="Ertapenem" align="center">
<figcaption>Ertapenem</figcaption>
</figure>
</div>
<div class="divSquare2">
<figure>
<img src="img/active_substance/teikoplanin.png" alt="Teikoplanin" align="center">
<figcaption>Teikoplanin</figcaption>
</figure>
</div>

Answer 3

Set a static height for your figure element. This will make them all have the same height and spacing. I believe this will solve your issue but your question was vague.
figure {
height: 150px;
}