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

Question

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.

You should maybe take a look into [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - also possible duplicate of [How to align 3 divs (left/center/right) inside another div?](http://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) — AlexG, Aug 16 '16 at 13:05
_“I am using bootstrap...”_ – hardly … You are rather _violating_ bootstrap, by applying stuff like float to row elements (and inventing your own values on the way, `float:center` – that doesn’t even exist.) You should probably _start_ with _one_ row, that has three columns. Throw in some of the offset classes, if the column widths don’t add up to 12. — CBroe, Aug 16 '16 at 13:19
Do you mean if I need bootsrap? Yes I do for sake of responsiveness — Andrea Robinson, Aug 16 '16 at 13:43

AlexG · Answer 1 · 2016-08-16T13:16:59.780

0

For bootstrap try the class .center-block

Set an element to display: block and center via margin. Available as a mixin and class.

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Example:

<div class="row">
    <div class="col-xs-12">
        <div class="your-custom-class center-block">
            // your code here
        </div>
    </div>
</div>

edited Aug 16 '16 at 13:16

answered Aug 16 '16 at 13:10

AlexG

5,649
6
26
43

I have three divs not one – Andrea Robinson Aug 16 '16 at 13:16
you do have 3 divs, adapt this example to your code :) `.center-block` requires `width` or `max-width` to be set. I've added `.your-custom-class` for this reason. You also might want to check this out: [Bootstrap Guidelines](http://stackoverflow.com/questions/36909338/grid-do-not-have-margins-in-bootstrap/36909943#36909943) – AlexG Aug 16 '16 at 13:20
dont understand this
– Andrea Robinson Aug 16 '16 at 13:23
`.your-custom-class` contains your custom CSS, maybe a background or whatever, it should contain `width` or `max-width` of your element – AlexG Aug 16 '16 at 13:25
Can I do this
– Andrea Robinson Aug 16 '16 at 13:29
Yes this does work, though centering a 100% block doesn't make much sense, does it? And inline style it bad practice. You seem to be new to html/css. Try to edit your elements via a CSS file or inside your ` – AlexG Aug 16 '16 at 13:33
Yes. This solution did not work as the three divs became vertically lapped on top of each other instead of three different columns of left center and right – Andrea Robinson Aug 16 '16 at 13:36
use 3 columns `.col-md-4`. You should definitly take a deeper look into bootstraps syntax – AlexG Aug 16 '16 at 13:45

score 0 · Accepted Answer · answered Aug 16 '16 at 13:44

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>

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

HTML

CSS

2 Answers2

Example: