I have div and I need to put text on the left, another on the right, and a icon centered, all aligned on top. I was able to get to this point, but so far I can not align them on top:
<div style="width=40%">
<a>
<h:outputLabel value="Alta Prioridade" style="float: left;"/>
<i style="margin-left: 50%; margin-right: 50%;" class="fa fa-thumb-tack" ></i>
<h:outputLabel value="08/10/2015" style="float: right; text-align: right;"/>
</a>
</div>
The following code works in any browser. If you want to increase the size of the central column, decrease the size of .col proportionally, the sum of the columns should never exceed 100%.
i {
display: block;
width: 32px;
height: 32px;
background-color: black;
margin-left: auto;
margin-right: auto;
}
.container {
width: 40%;
border: 1px solid gray;
height: 100px;
}
.col {
float: left;
width: 29.999%;
overflow: hidden;
}
.col.center {
width: 40%
}<div class="container">
<div class="col left">Alta Prioridade</div>
<div class="col center"><i></i></div>
<div class="col right">08/10/2015</div>
</div>