Andrea Robinson Andrea Robinson - 3 months ago 10
CSS Question

trying to float three divs to the left center and right using bootsrap css

I am trying to float three divs to the left center and right and there should all be horizontally the same. This is my attempt:

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;
}


My challenge is that the three divs floated to the left, center and right but they never began at the position, only the left and right divs are at the same position.

Please how do I float the three divs to the left center and right and starting at the same position that is making them horizontally aligned.

Answer

I have the idea that you are new to Bootstrap, here take this answer and read through the documentation urself.

<div class="container">
  <div class="row">

    //to be centered div
    <div class="col-md-4 col-md-push-4">
        <form>
        </form>
    </div>

    //to be floated to the left
    <div id="active-container" class="col-md-4 col-md-pull-4">
        <p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE LEFT </strong></p>
        <div id="active_users">
        </div>
    </div>

    //to be floated to the right
    <div id="active-container" class="col-md-4">
        <p style="color:#fff; font-size:15px;"><strong>FLOATED TO THE RIGHT </strong></p>
        <div id="engaged_users">
        </div>
    </div>

  </div>
</div>