Aligning multiple div boxes horizontally and vertically

Question

I'm using https://almsaeedstudio.com/preview theme which gives some brilliant boxes layout and social widget boxes layout which I want to use in my project.

Refer to simple box screenshot

and social widget box

.

I'm trying to arrange multiple simple boxes horizontally where each of the simple box can contain multiple social widget boxes.

Refer to this screenshot for more clarity:

.

I tried playing with the exiting simple boxes and social widget boxes code and come up with this snippet.

I have created this plunker, somehow css is not getting loaded properly.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="row">
  <div class="col-md-12">
    <div style="overflow:auto;">
      <div class="" style="width:2050px;">
        <div class="box" style="display:inline-block;width:1000px;">
          <div class="box-header with-border">
            <h3 class="box-title">Monthly Recap Report</h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <div class="btn-group">
                <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a>
                  </li>
                  <li><a href="#">Another action</a>
                  </li>
                  <li><a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body" style="display: block;">
            <div class="">



              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="img-push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>
              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="img-push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>


            </div>
            <!-- /.row -->
          </div>
          <!-- ./box-body -->
          <div class="box-footer" style="display: block;">
            <!-- /.row -->
          </div>
          <!-- /.box-footer -->
        </div>
        <!-- /.box -->

        <div class="box" style="display:inline-block;width:1000px;">
          <div class="box-header with-border">
            <h3 class="box-title">Monthly Recap Report</h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <div class="btn-group">
                <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a>
                  </li>
                  <li><a href="#">Another action</a>
                  </li>
                  <li><a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body" style="display: block;">
            <div class="">



              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="img-push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>
              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="img-push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>


            </div>
            <!-- /.row -->
          </div>
          <!-- ./box-body -->
          <div class="box-footer" style="display: block;">
            <!-- /.row -->
          </div>
          <!-- /.box-footer -->
        </div>


      </div>
      <!-- /.col -->
    </div>
  </div>
</div>
  </body>

</html>

http://plnkr.co/edit/slpJLIRVGfMSC8JWG1bT?p=preview

But its not working. Can anyone please help me how to accomplish this ?

P.S.: I have searched on internet and found similar threads but none is working for me. Horizontally align div without float

I'm still a beginner in CSS and would really appreciate if I can get some help here. I'm breaking my head on this for a long time.

Update

I think it makes sense to clearly write out the actual issues and try to solve them one by one.

Horizontal boxes are not aligned on the same row if the inner social widget box is collapsed/expanded. How can I ensure the height of the horizontal box is fixed irrespective of the inner social widget box height ? Refer to screenshot for same.
There are some answers which mention the use of display: float:left; but my issue is the variable width which actually ensures all horizontal boxes on the same row.

  <div class="" style="width:2050px;">

How do I ensure the width:2050px; to increase dynamically as I will be adding inner boxes on fly. P.S.: I'm using angularjs for ui. Is there any CSS trick which is independent of the width:2050px; That way there will be no dependency on the total width calculation.

How to fix the height of inner social widget box ? The inner social widget box overflows the actual horizontol container. how can I fix this ?
Sharing an image of what actually I'm trying to accomplish. .

In short I want to accomplish point 4 with this theme's existing boxes and social widget boxes. If there is any other better way of doing this, please share the same.

In case anything is not clear, please feel free to mention it in comment. I'll update the question accordingly.

Thanks

Update 2:

I think same height columns is what making this problem more complicated. What I can do is having a scroll bar inside horizontol box which can have multiple social widgets boxes. That way we can have a fixed height for each of the horizontol column.

Update 3:

While zer00ne@ has provided one solution which is based on Flex. I have read on some forums that it doesn;t work on all browsers. Since my web-page is going to be mobile friendly, I;m more inclined towards achieving my desired results using general CSS techniques.

In path of achieving my result, I created following version http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview using this SO thread. Following is screenshot of same:

Now I'm facing one issue of text getting out of inner social widget box. I need some help on this thing.

In addition to that, can people take a review of these if this solution is any better or not ?

Thanks

The snippet is not working. It is hard to guess what you are trying to do. are you struggling with float ? — DivineCoder, Sep 05 '15 at 15:18
No, its not just I'm struggling with float but with a bigger problem...You can simply plugin the entire snippet in the original html page...I'm working on a plunker also..that way I think people can understand the problem better — dark_shadow, Sep 05 '15 at 15:58
Please refer to the plnkr I have created, somehow css is not getting loaded properly but at least it should be able to give you some idea of what exactly I'm trying to do — dark_shadow, Sep 05 '15 at 16:30
Also, refer to the last screenshot in the question, it will give you some idea of what exactly I'm trying to do — dark_shadow, Sep 05 '15 at 16:31
I ask you: Can you use a CSS framework? With **Foundation Equalizer** (makes all boxes that you want to be equal in height) and `vertical-align: top` in the `display:inline-block` elements you solve the issue. — Marcos Pérez Gude, Sep 09 '15 at 14:30
@MarcosPérezGude: I'm already using bootstrap in my project. In addition to that I have included the css from the theme mentioned in the question. I will be happy if I can accomplish my task using existing things with support for all browsers. — dark_shadow, Sep 09 '15 at 14:39
Foundation Equalizer helps you to solve the height problem. The alignment will be solved if you write `vertical-align:top` in the parent boxes. — Marcos Pérez Gude, Sep 09 '15 at 14:43
`vertical-align:top` solves the alignment issue but height problem is still there. Looking into Foundation Equalizer but are you sure there is no way it can be done through bootstrap ? — dark_shadow, Sep 09 '15 at 14:55
you didn't provide a css file with your snippet, so it's hard to say what is in it. what i can see in your snippet is that you mix stylesheet with inline-css. example:
. that is bad coding style — Diego 72, Sep 09 '15 at 16:01
@Diego72: As I have mentioned in my question, I'm using twitter bootstrap and https://github.com/almasaeed2010/AdminLTE CSS files in my project. In addition to those, to solve my problem I have added these style classes. Sorry about that, I'm a bit new to front-end — dark_shadow, Sep 09 '15 at 16:05
I added a simple solution here: https://github.com/almasaeed2010/AdminLTE/issues/674 — Abdullah A Almsaeed, Sep 09 '15 at 15:22
@dark_shadow you asked me: `Looking into Foundation Equalizer but are you sure there is no way it can be done through bootstrap ?` And the answer is YES: http://getbootstrap.com.vn/examples/equal-height-columns/ — Marcos Pérez Gude, Sep 10 '15 at 13:39
@MarcosPérezGude: I have already seen this link and tried using it but somehow it's not working. I'm using bootstrap v3.1.1. I think this might have been added after this version. BTW have you checked the last updates which happened after our last discussion ? — dark_shadow, Sep 10 '15 at 13:43
Maybe you doesn't include the bootstrap javascript library, that make it works, with css only it's impossible. — Marcos Pérez Gude, Sep 10 '15 at 13:43
@dark_shadow Mobile? In my developing this solution, I have already found a way to stack all columns on top of each other. That is your simple solution to using mobile, scrollbars are automatically included. You need to pay a web developer. With all of your on the fly requests and changes. In the beginning I warned you about fixed heights (which my answer doesn't have). You should test what I have with the proper equipment and/or emulators, give me proof that flexbox doesn't work. I have given evidence to the contrary. — zer00ne, Sep 10 '15 at 15:09
@zer00ne: yes based on the search it looks like flexbox is the only solution which ensures these requirements but I'm still looking out for other CSS solutions. Thank you for your help :) — dark_shadow, Sep 10 '15 at 15:22
I hope that this is a private project and not your actual job. ;) — zer00ne, Sep 10 '15 at 15:43
This is a private project only...I'm learning front end development with bootstrap, angularjs :) — dark_shadow, Sep 10 '15 at 15:46
@dark_shadow *Now I'm facing one issue of text getting out of inner social widget box. I need some help on this thing.* on `.MyClass` it looks like you plan to use ellipses? If so, save yourself some headache and use a small plugin. Atm I don't remember the name of one I used to use, I'll get back to you on that. — zer00ne, Sep 14 '15 at 19:27

zer00ne · Accepted Answer · 2016-02-20T18:38:19.643

>>>>>>>>>>>>>>>>>>>>FLEXBOX SOLUTION<<<<<<<<<<<<<<<<<<<<

Here is the REAL SOLUTION to the ORIGINAL QUESTION if anyone is actually interested.

dark_shadow:

While zer00ne@ has provided one solution which is based on Flex.

Problem resolved see my demos below, it speaks for itself. I have no idea why starikovs is getting upvotes at all when there is clearly no solution provided.

I had to recreate the page because the extra classless <div>s you placed inside the markup was confusing. The significant change was adding flexbox to the layout. I used two flexbox containers, one that controlled the two columns .flexRow and another inside of each column to control the widgetboxes, .flexCol. Those classless <div>s are combined into a <section class="colWrap" I added intrinsic measurements so that your layout isn't stuck at a fixed width of 2050px, you'll still need to adjust both .box to an intrinsic measurement, 1000px fixed is going to give grief in the future. The changes will be annotated when I get back. Unless of course this isn't what you wanted?

LAST to the LAST UPDATE

>>>>>>>>>>PLUNKER<<<<<<<<<<

EDIT

~~Just add a fixed height to .colWrap, suggest 100vh to 150vh~~

I checked out the height of both columns and they are in fact identical down to the decimal. See the screenshots:

Column 1

Column 2

OLD

You just need everything aligned, correct? Ok, look here please: http://embed.plnkr.co/MRI69qLoTkiL9F68g54M/preview

I added this to the <head>

<!DOCTYPE html>
<html>

  <head>
    <base href="https://almsaeedstudio.com/themes/AdminLTE/">
    <link href="https://almsaeedstudio.com/themes/AdminLTE/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

UPDATE

Added the script as well. It's located before the closing </body> tag.

<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>

You probably don't need all of them, but the essential ones are:

bootstrap.min.css
font-awesome.min.css
jQuery-2.1.4.min.js
bootstrap.min.js
app.min.js
jquery.slimscroll.min.js

There's a lot of relative URLs (ex. ../dist/img/photo2.png), so I added the following to the top of the <head>:

<base href="https://almsaeedstudio.com/themes/AdminLTE/">

The majority of these external files are located at that base url. If the download package didn't properly provide adequate assets, I always go to the source of the site's demo. Frequently the developer(s) neglect the differences between the dist and the demo.

UPDATE

As I understand the problem is that the layout needs to be properly aligned with widgetboxes or in the absence of widgetboxes. I don't think using display:none on widgetboxes is the way this template was designed. Consider the following annotated excerpts from the file, app.min.js

Excerpts from the AdminLTE script, app.min.js

Notes at the bottom.

/*! AdminLTE app.js
 * ================
 * Main JS application file for AdminLTE v2. This file
 * should be included in all pages. It controls some layout
 * options and implements exclusive AdminLTE plugins.ᵃ
 *
/*...*/†

 $.AdminLTE.boxWidget = {
    selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
    icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
    animationSpeed: $.AdminLTE.options.animationSpeed,
    activate: function (a) {
      var b = this;
      a || (a = document), $(a).on("click", b.selectors.collapse,
        function (a) {
          a.preventDefault(), b.collapse($(this))
        }), $(a).on("click", b.selectors.remove, function (a) {
        a.preventDefault(), b.remove($(this))
      })
    },
   ᵇcollapse: function (a) {
      var b = this,
        c = a.parents(".box").first(),
        d = c.find(
          "> .box-body, > .box-footer, > form  >.box-body, > form > .box-footer"
        );
      c.hasClass("collapsed-box") ? (a.children(":first").removeClass(
        b.icons.open).addClass(b.icons.collapse), d.slideDown(
        b.animationSpeed,
        function () {
          c.removeClass("collapsed-box")
        })) : (a.children(":first").removeClass(b.icons.collapse)
        .addClass(b.icons.open), d.slideUp(b.animationSpeed,
          function () {
            c.addClass("collapsed-box")
          }))
    },
   ᶜ remove: function (a) {
      var b = a.parents(".box").first();
      b.slideUp(this.animationSpeed)
    }
  }
}
if("undefined" == typeof jQuery) throw new Error(
  "AdminLTE requires jQuery");

/*...*/†

 ᵈ function (a) {
    "use strict";
    a.fn.boxRefresh = function (b) {
      function c(a) {
        a.append(f), e.onLoadStart.call(a)
      }

      function d(a) {
        a.find(f).remove(), e.onLoadDone.call(a)
      }
      var e = a.extend({
          trigger: ".refresh-btn",
          source: "",
          onLoadStart: function (a) {
            return a
          },
          onLoadDone: function (a) {
            return a
          }
        }, b),
        f = a(
          '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
        );
      return this.each(function () {
        if("" === e.source) return void(window.console &&
          window.console.log(
            "Please specify a source first - boxRefresh()")
        );
        var b = a(this),
          f = b.find(e.trigger).first();
        f.on("click", function (a) {
          a.preventDefault(), c(b), b.find(".box-body").load(
            e.source,
            function () {
              d(b)
            })
        })
      })
    }
  }(jQuery),
  function (a) {
    "use strict";
    a.fn.activateBox = function () {
      a.AdminLTE.boxWidget.activate(this)
    }
  }(jQuery)  function (a) {
    "use strict";
    a.fn.boxRefresh = function (b) {
      function c(a) {
        a.append(f), e.onLoadStart.call(a)
      }

      function d(a) {
        a.find(f).remove(), e.onLoadDone.call(a)
      }
      var e = a.extend({
          trigger: ".refresh-btn",
          source: "",
          onLoadStart: function (a) {
            return a
          },
          onLoadDone: function (a) {
            return a
          }
        }, b),
        f = a(
          '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
        );
      return this.each(function () {
        if("" === e.source) return void(window.console &&
          window.console.log(
            "Please specify a source first - boxRefresh()")
        );
        var b = a(this),
          f = b.find(e.trigger).first();
        f.on("click", function (a) {
          a.preventDefault(), c(b), b.find(".box-body").load(
            e.source,
            function () {
              d(b)
            })
        })
      })
    }
  }(jQuery),
  function (a) {
    "use strict";
    a.fn.activateBox = function () {
      a.AdminLTE.boxWidget.activate(this)
    }
  }(jQuery)

† This code is skipped over

ᵃ The developer implies that this app is not a complete solution but a complete solution is available to buy.

ᵇ The boxwidgets collapse and height should adjust accordingly.

ᶜ The boxwidgets can be removed and height should be adjusted accordingly.

ᵈ The function boxRefresh() is a public method I believe. It could be used after an addition or subtraction of a widget I suppose.

I'm not the best at interpreting third party plugins, so any extra observations and/or corrections are welcome.

LAST UPDATE

I got it so when any section is collapsed, they will slide up rather than down. As for the 2 main columns, they behave as they should and if the first column is actually removed, then the second column will take the first column's place.

You have just removed the `display: none` in inner social widget boxes to `display: block` and since all social widget blocks contains the same content they are by default appearing of same height. Check my original plnkr and try to make it properly aligned — dark_shadow, Sep 09 '15 at 18:39
Please refer to my Update in question. I have clearly mentioned the issues which I'm having. Let me know if that is not clear. Also, to replicate the issue, you can simply change the inner social widget boxes, `display: block` to `display: none` — dark_shadow, Sep 09 '15 at 18:46
@dark_shadow *In short I want to accomplish point 4 with this theme's existing boxes and social widget boxes.* You want the social boxes? Is `display: none` a state due to a certain condition? You plan to dynamically add these boxes? — zer00ne, Sep 09 '15 at 18:57
Yes, there will be social widget boxes which will be dynamically added. And this doesn't mean that always you will have same number of boxes. I told you to put `display:none` so that you can see for yourself what happens when number of boxes/content reduces/increases and corresponding effect of that on the height. — dark_shadow, Sep 09 '15 at 19:01
@dark_shadow See **Last Update** Everything is inline, with any number of widgets in collapsed or expanded states. The columns will collapse and expand properly as well. Plus if you remove the first column, the second column will take it's place. — zer00ne, Sep 09 '15 at 22:01
@zer00one: One doubt, by looking at demo it looks like the height of two columns are not same. Is it so ? Have you given any fixed height to them ? Also, please share a plnkr for the demo. It will be better that way. — dark_shadow, Sep 10 '15 at 03:14
@dark_shadow If you add a fixed height, then how do plan handling a time when the number of widgetboxes exceed the height? In this layout, fixed height is death. *somehow css is not getting loaded properly but at least it should be able to give you some idea of what exactly I'm trying to do* So you want me to place it in an environment that is prohibiting expected behavior? That's the reason I put it in a plain old vanilla S3 bucket. That is a better test environment than Plunker. Unless you plan to host your page on Plunker? In screenshot 4. all of those columns are the same height? — zer00ne, Sep 10 '15 at 03:35
@dark_shadow **The Last of the Last Update** is the same as the **Last Update** but with the additional requests addressed. Good luck. — zer00ne, Sep 10 '15 at 04:14
I agree that there will be a time when the number of widgetboxes exceed the height. In order to handle such scenarios we can have a scroll bar inside horizontal boxes. That way we can have infinite widget boxes within same horizontal boxes. Yes, screenshot 4 actually has all the columns of same height extending till bottom of page. — dark_shadow, Sep 10 '15 at 05:44
@dark_shadow You can have any height, see **Last to the Last Upadate** — zer00ne, Sep 10 '15 at 05:54
@dark_shadow You don't need to adjust the height. **Both columns are the same height**. See screenshots. [Column 1](http://i.imgur.com/l7Lefi9.png) [Column 2](http://i.imgur.com/sPnGUuU.png) — zer00ne, Sep 10 '15 at 06:10
That's strange. Screenshots clearly shows that height of both the columns are same but taking a look at first it appears that first column is having a height greater than second column...Do you think we should add some scroll bar and keep height of all the columns fixed so that it appears more aligned ? — dark_shadow, Sep 10 '15 at 06:21
You can add a border to `.box` which will emphasize symmetry. I had forgotten that I set flexbox to stretch vertically, hence the pleasantly unexpected behavior. — zer00ne, Sep 10 '15 at 06:26
You have used flex in your css but as far as I know it's not compatible with old browsers. How exactly can we solve this issue ? Is there anything we can do with existing bootstrap stuff ? — dark_shadow, Sep 10 '15 at 12:40
@dark_shadow Mobile? In my developing this solution, I have already found a way to stack all columns on top of each other. That is your simple solution to using mobile, scrollbars are automatically included. You need to pay a web developer. With all of your on the fly requests and changes. In the beginning I warned you about fixed heights (which my answer doesn't have). You should test what I have with the proper equipment and/or emulators, give me proof that flexbox doesn't work. I have given evidence to the contrary. — zer00ne, Sep 10 '15 at 15:08
Regarding your this statement I added intrinsic measurements so that your layout isn't stuck at a fixed width of 2050px Is there anyway we can remove the dependency on the total width ? This was part of my initial questions and I can see it is still dependent on the total width. Please correct me if I'm wrong — dark_shadow, Sep 10 '15 at 17:44
I used `max-width: 2050px` and `200vw`. One is a limit and the other one is intrinsic. This states that your 2 columns will be twice the width of your screen, but cannot be larger than 2050px; I hardly call that fixed. So in the spirit of your question, I have meet and exceeded what was originally requested. The growing criteria for this project confounds me. I have given you a working demo with flexbox, what more is there? Mobility? Indeed I have a solution yet it's pointless to continue. You clearly stated you don't want flexbox, so I cannot help you since flexbox isn't an option. — zer00ne, Sep 10 '15 at 19:07
Indeed I have to switch to Flexbox only. I have figured out a way to remove those outer 2050px widths altogether. That way my dynamic addition of columns will be easier to handle. I'm still looking for mobility part. I'll be sharing my updated code soon with flex part. Thanks once again — dark_shadow, Sep 10 '15 at 19:22
one more thing regarding mobility problem, I think the solution would be to use column in flex-direction property. That way it will be stacked over one another. We can wrap this in a media query, I guess. Still working on it, will share the updated code soon — dark_shadow, Sep 10 '15 at 19:27

score 9 · Answer 2 · answered Sep 10 '15 at 13:33

The new way of aligning is to use flexbox. Here's a simple example to show the power:

HTML:

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

.wrapper {
    display: flex;
}

Now your divs inside .wrapper are aligned in a row.

BTW, you can use Autoprefixer to get the right browser prefixes.
Flexbox is supported by all the major browsers: http://caniuse.com/#search=flexbox (with prefixes)

With flexbox you can align items as you want simply, aligning them vertically in the center, horizontally in the center, etc.

pgrekovich · Answer 3 · 2015-09-09T13:44:00.107

1

You can use display: flex, read more: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ P.S. But you need use prefixes for old browsers

edited Sep 09 '15 at 13:44

answered Sep 09 '15 at 13:38

pgrekovich

137
1
9

score 0 · Answer 4 · answered Sep 09 '15 at 09:43

0

You could use float to position the boxes horizontally. I forked your Plunker and changed the .box from display: inline-block; to float: left;: http://plnkr.co/edit/Woo31pPiHi4HcvXZ9NXE?p=preview

answered Sep 09 '15 at 09:43

Erik Djupvik

1,187
1
10
13

Sure, floats are easy to break, I'll agree with that, but so are inline-block alignments. – Erik Djupvik Sep 09 '15 at 13:09
Alternatively OP could use flexbox if he doesn't have to support older browsers. – Erik Djupvik Sep 09 '15 at 13:10
@ErikDjupvik: Can you please take a look at my update and respond back accordingly. – dark_shadow Sep 09 '15 at 14:26

crazymatt · Answer 5 · 2015-09-10T17:58:54.657

After reading your question and looking over the comments I see the theme you are using has (or you have added) twitter bootstrap. I am not sure why you wouldn't use its grid system based on the layout you are trying to achieve. Looking at the theme link you provided I see this layout which contains 4 horizontally aligned widgets which should be more than enough for what you are trying to achieve.

<section class="content">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 1, example widget code below -->
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Messages</span>
                    <span class="info-box-number">1,410</span>
                </div>
            </div>
            <!-- Next widget underneath would go here -->
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 2, add widgets in here -->
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 3, add widgets in here -->
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 4, add widgets in here -->
        </div>
    </div>
</section>

If I am misunderstanding the question please let me know. Hope that helps.

EDIT #2 - Added some CSS and Fiddle link

Based on your feedback here is how I would handle the multiple columns

CSS

.cust-table {
    display: table;
    padding: 0;
    width: 100%;
}
.cust-tr {
    display: table-row;
}
.cust-td {
    border-collapse: collapse;
    display: table-cell;
    vertical-align: top;
    background: pink;
    border: 1px solid gray;
    min-width: 100px;
}

HTML

<div class="cust-table">
    <div class="cust-tr">
        <div class="cust-td">
            <!-- Column 1, example widget code below -->
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Messages</span>
                    <span class="info-box-number">1,410</span>
                </div>
            </div>
            <!-- Next widget underneath would go here -->
        </div>
        <div class="cust-td">
            <p>Its all bang bang bloddy bang to me!</p>
        </div>
        <div class="cust-td">
            <p>This is another column with text just for fun</p>
        </div>
        <div class="cust-td">
            <p>This is another column with more excitement then the last column. Dont believe me?</p>
        </div>
    </div>
</div>

This way if you end up with 20 columns they would all show horizontally. Depending on how wide you want them to show you could use min-width so they wouldn't end up too squished. Here is a JS.Fiddle link if you want to play around with the layout.

You are partially right that twitter bootstrap is used but the original intention of the questions states that we will be dynamically adding multiple columns horizontally and that is not limited to 4 horizontol widgets. Also, height of all these horizonatol columns should be same. There are other complications for which please refer to my question — dark_shadow, Sep 09 '15 at 18:42
@dark_shadow ok good to know. I will take a look at your question again. I understand that you cannot use twitter bootstraps columns because you will be dynamically adding the columns but keeping the structure I posted above will keep the column heights the same FYI. — crazymatt, Sep 09 '15 at 18:50
I understand that way height will remain same but how will you handle situation when you have 20 columns all needs to be shown on same row horizonatally ? — dark_shadow, Sep 09 '15 at 18:58
Can you please share a plnkr for the propsed solution. It'll be better that way. Thanks — dark_shadow, Sep 10 '15 at 03:15
Apparently this solution doesn't work. As you keep adding the columns the width of columns keeps decreasing. I can see you have mentioned using min-width for solving that issue but somehow that doesn;t solves the problem. You can perhaps create a plunker check it. Thanks — dark_shadow, Sep 10 '15 at 08:05
min-width doesnt solve the problem of the columns becoming too squished? [Check out a JS.Fiddle example](https://jsfiddle.net/y2pL28aj/) I just made. Seems to work fine there. — crazymatt, Sep 10 '15 at 17:55
When I tried to use your proposed solution, it wasn't working for me. Perhaps, I might have missed something...anyways thanks for your help but your solution won't be able to solve my problem. Refer to my updates for more clarity. Thank you once again for your time :) — dark_shadow, Sep 10 '15 at 18:09

Aligning multiple div boxes horizontally and vertically

5 Answers5

>>>>>>>>>>>>>>>>>>>>FLEXBOX SOLUTION<<<<<<<<<<<<<<<<<<<<

>>>>>>>>>>PLUNKER<<<<<<<<<<

OLD