Is there a way to adjust the alert button to eliminate extra space without setting a specific height for the parent element?
Please refer to this fiddle for reference.
Here is the HTML code:
<div class="alert-list">
<div class="alert-error">Plase update your system with new release</div>
<div class="alert-notify">New Release are ready for download verify with hash</div>
<div class="alert-error">System is not actived. Please activce first for full access</div>
<div class="alert-error">System is not actived. Please activce first for full access</div>
<button class="bnt-show-alerts">show more</button>
</div>
And the CSS code:
.alert-list {
width:400px;
background-color:#E9E9E9;
padding:3px;
/*height: auto; automaticly arrange*/
}
.alert-error {
background-color:rgba(255, 0, 0, 0.2);
margin:2px;
}
.alert-notify {
background-color:rgba(0, 255, 0, 0.2);
margin:2px;
}
.bnt-show-alerts {
position:relative;
right:-310px;
bottom:30px;
opacity:0.5;
}
.bnt-show-alerts:hover {
opacity:1.0;
}