Check out the issue I'm facing:
https://i.sstatic.net/7yMpI.png
The buttons below each section are not aligning properly.
Take a look at my Code:
.locouter {
width: 100%;
border: none;
}
.locouter td {
text-align: left;
vertical-align: top;
}
.usplit {
border: none;
width: 100%;
}
.usplit td {
width: 33%;
text-align: left;
vertical-align: top;
padding: 15px;
font: 14px/20px Arial, Helvetica, Sans-serif;
color: #000000;
}
.usplit td h3 {
font: 24px/24px DinWebCond, Sans-serif;
color: #000000;
margin: 0px;
text-transform: uppercase;
}
.usplit td button {
display: block;
float: right;
margin-top: 10px;
outline: none;
font: 14px/14px DinWebCond, Sans-serif;
color: #808080;
border: 1px solid #c0c0c0;
background-color: #f0f0f0;
border-radius: 3px;
cursor: pointer;
padding: 9px 10px 7px 10px;
text-transform: uppercase;
...
</table>Upon closer inspection, you'll notice a series of <br/> tags just before the <button> element. Instead of using CSS positioning, I have used line breaks which is causing alignment issues for the buttons.
Predictably, the breaks in the code are resulting in misalignment of the buttons.