I've been attempting to align three divs horizontally by floating them to the left, center, and right. Here is my code so far:
HTML
//to be centered div
<div style="float:center">
<form>
</form>
<form>
</form>
</div>
//to be floated to the left
<div style="float:left" id="active-container" class="row">
<div class="col-lg-1 col-centered">
<p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE LEFT </strong></p>
<div id="active_users">
</div>
</div>
</div>
//to be floated to the right
<div style="float:right" id="engaged-container" class="row">
<div class="col-lg-1 col-centered">
<p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE RIGHT </strong></p>
<div id="engaged_users">
</div>
</div>
</div>
CSS
.col-centered {
float: none;
margin: 0 auto;
}
One problem I've encountered is that although the left and right divs are aligned properly, the center div doesn't start at the same position. How can I make all three divs float to the left, center, and right while ensuring they align horizontally?