Two div boxs centered and same height (with images) [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
currently taking a course about HTML and CSS. As an assignment we've been told to replicate some parts from an online news paper.
The above picture is what I'm trying to reach. I imagine it being three div boxes. A parent one, and two child divs (right and left).
This is what it looks with what I've done:
Obvious as it is, the two child div boxes wont align in height. I can't seem to figure this out, sadly.. So I hope one here can help me!
.overskrift {
text-align: center;
font-size: 50px;
}
.div2 {
display: block;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.div2-left {
display: inline-block;
border: 1px solid black;
width: 30%;
}
.div2-right {
display: inline-block;
border: 1px solid black;
width: 20%;
}
.debat {
color: DodgerBlue;
font-weight: bold;
}
.arkiv {
color: white;
}
.arkiv span {
background-color: DodgerBlue;
}
.div-2-1-img {
height: 75%;
width: 75%;
}
.div-2-2-img {
height: 50%;
width: 50%;
}
<div>
<p>dette er div1 (første artikel)</p>
</div>
<div class="div2">
<div class="div2-left">
<img class="div-2-1-img" src="http://placehold.it/150">
<p class="debat">DEBAT</p>
<h2>Hvor er tilsynet?</h2>
<div style="display: inline-block; text-align: left; margin-left: 25%">
<p>Historien om udledning af spildevand vidner om norsk dobbeltmoral og dansk blåøjethed.</p>
</div>
<p>MIKALA SØRENSEN</p>
</div>
<div class="div2-right">
<p class="arkiv"> <span>FRA ARKIVET</span></p>
<img class="div-2-1-img" src="http://placehold.it/150">
<h2>Som smurt i olie</h2>
<div style="display: inline-block; text-align: left; margin-left: 10%">
<p>Et dansk firma har i årtier importeret hele <br> tankskibe fulde af forurenet spildevand fra <br> den norske olieindustri. De fortynder det <br> med grundvand, renser det og leder det ud <br> i Agersø Sund. Lokale klager over <br> forurening og
døde fisk. De føler, at ingen <br> lytter.</p>
</div>
<p>MAGNUS BODING HANSEN</p>
</div>
</div>
I really hope someone is able to help me out here. I am really stuck.. Thanks in advance! And may you have a great day!

Answer 1

Take a look at flexbox. By setting display: flex on the parent you can then add align-items: flex-start to tell the flex parent to make the child divs align to the start, or top. align-items: flex-start is actually the default, and not needed, but wanted to add for some additional context.
.div2 {
align-items: flex-start;
display: flex; // This is the important line
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.div2-left {
border: 1px solid black;
width: 30%;
}
.div2-right {
border: 1px solid black;
width: 20%;
}

Answer 2

Change the vertical-align property of your two divs from the default of baseline to top.
.overskrift {
text-align: center;
font-size: 50px;
}
.div2 {
display: block;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.div2-left {
display: inline-block;
border: 1px solid black;
width: 30%;
}
.div2-right {
display: inline-block;
border: 1px solid black;
width: 20%;
}
.debat {
color: DodgerBlue;
font-weight: bold;
}
.arkiv {
color: white;
}
.arkiv span {
background-color: DodgerBlue;
}
.div-2-1-img {
height: 75%;
width: 75%;
}
.div-2-2-img {
height: 50%;
width: 50%;
}
.div2-left,
.div2-right {
vertical-align: top;
}
<div>
<p>dette er div1 (første artikel)</p>
</div>
<div class="div2">
<div class="div2-left">
<img class="div-2-1-img" src="http://placehold.it/150">
<p class="debat">DEBAT</p>
<h2>Hvor er tilsynet?</h2>
<div style="display: inline-block; text-align: left; margin-left: 25%">
<p>Historien om udledning af spildevand vidner om norsk dobbeltmoral og dansk blåøjethed.</p>
</div>
<p>MIKALA SØRENSEN</p>
</div>
<div class="div2-right">
<p class="arkiv"> <span>FRA ARKIVET</span></p>
<img class="div-2-1-img" src="http://placehold.it/150">
<h2>Som smurt i olie</h2>
<div style="display: inline-block; text-align: left; margin-left: 10%">
<p>Et dansk firma har i årtier importeret hele <br> tankskibe fulde af forurenet spildevand fra <br> den norske olieindustri. De fortynder det <br> med grundvand, renser det og leder det ud <br> i Agersø Sund. Lokale klager over <br> forurening og
døde fisk. De føler, at ingen <br> lytter.</p>
</div>
<p>MAGNUS BODING HANSEN</p>
</div>
</div>