I am facing a challenge with aligning buttons in three different td tags, as the text content within each varies. I want the buttons to line up evenly regardless of the amount of text present. Is there a solution that does not involve setting a fixed paragraph height?
Setting a fixed height for the paragraph section is not ideal, as it may restrict the amount of text that can be included. Is there a way to achieve this alignment without such limitations?
Please refer to the following screenshot for reference:
Below is the extracted HTML code (Apologies for any mistakes):
<td width="300" valign="top" height="114">
<div class="imageTextOverlay_1">BOOK A VISIT</div>
<a href="/visit-us.aspx">
<img width="300" height="136" alt="Visit Beaufort Court" src="/media/1281571/visit_us.jpg">
</a>
<h3>Visit Beaufort Court</h3>
<p>If you would like to find out more about wind energy, solar power, borehole cooling or biomass then come and visit us at Beaufort Court. We welcome schools, colleges, universities, professional bodies and community groups.</p>
<a class="imageButtonOverlay" href="/visit-us.aspx">Book Now >></a>
</td>
The CSS styling used for the buttons is as follows:
.imageButtonOverlay {
background-color: #78A22F;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
float: right;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
margin: 5px 0 20px;
padding: 5px 7px;
}