When designing my website, I decided to organize the content into rows using CSS instead of tables. To create a line separating each row, I used height:px; for each row manually. However, this method resulted in the line jumping around inconsistently across different browsers. Is there a way to automatically set the border so it appears at the end of the content inside the div?
.row1A {
height: 600px;
border-bottom: 1px solid white;
}
.row2A {
height: 820px;
border-bottom: 1px solid white;
}
<div class="row1A">
<div class="column1">
<h2> Bluerock FX-10G</h2>
***Content***
</div>
<div class="column2">
<img src="Images/Amps/Bluerock.jpg" alt="Bluerock FX-10G" width="450px" height="325px">
</div>
</div>
<div class="row2A">
<div class="column1">
<h2>Line 6 Spider IV 15W</h2>
***Content***
</div>
<div class="column2">
<img src="Images/Amps/Line6Spider.jpg" alt="Line 6 Spider IV" width="350px" height="350px">
</div>
</div>