I am trying to create a simple layout, but I'm having some difficulty. My goal is to have a centered header within a parent div, with a button aligned to the right of the header on the same line. While I was able to achieve this visually, the button is not clickable because the header covers it. Any ideas on how to resolve this issue?
.header {
position: absolute;
left: 0;
right: 0;
font-size: 20px;
text-align: center;
text-decoration: underline;
}
.parent {
border: solid 3px #000;
padding: 5px;
position: relative;
}
.button {
float: right;
}<div class="parent">
<div class="header">My header:</div>
<button type="button" name="abutton" class="button" onclick="alert('a');">The button!</button>
</div>edit:
Code error has been fixed.