Having trouble with aligning code within floated divs? In my left div, a span and image are stuck at the bottom left, while in the right one, text is fixed to the top-right.
Check out how it looks currently.
If you can provide some guidance on fixing this issue in my code, I would greatly appreciate it.
HTML:
<div class="header">
<div class="allSelector">
<img src={{imgSource}} (click)="showAll()"/><span (click)="showAll()" class="selectorInsides">{{expandContractStatement}}</span>
</div>
<div class="legend">
Incidents
Tasks
CRs
Problems
</div>
</div>
CSS:
.header {
background-color: gray;
color:black;
font-size: 24pt;
line-height: 24pt;
height: 6%;
max-height: 6%;
overflow: hidden;
vertical-align: middle;
}
.allSelector {
width: 50%;
max-height: 100%;
height: 100%;
float: left;}
.selectorInsides { /*Added due to previous issues*/
overflow: hidden;
}
.allSelector > img {
height: 80%;
object-fit: contain;
}
.legend {
line-height: 24pt;
max-height: 100%;
height: 100%;
width: 50%;
float: right;
margin: 0;
text-align: right;
vertical-align: middle;
}