How to put two blocks inline in menu bar In every theme I tested so far, when a block is added to Menu bar area, each block is always shown stacked in pile, my question is:


  There is a way to to make two or more blocks showing inline in menu bar area?


Please don't say that the question is "too generic", since I tested a plenty of template and they all stack blocks in pile!

Tpl modifications &amp;/or css solutions are both welcome.
No scripting please.
This is really a question on how to align blocks horizontally in a region, which calls for a CSS solution.

There are a few things to consider before you start:


Blocks have no defined width. Normally the outer wrapper is just a
div, as determined by the block.tpl file, and it is precisely because of
this that they take up all the horizontal space given to them. That
is why they stack vertically.
Each theme might be slightly different in handling floats. Some
themes are fixed width, some are fluid, some have a built in
framework for handling layout, most don't.


For a theme that has a fluid layout without a built-in layout framework, and showing two blocks inline, you can do this:

@media screen and (min-width:761px) {
    .region-featured:before,
    .region-featured:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .region-featured:after {
        clear: both;
    }

    /**
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */
    .region-featured {
        *zoom: 1;
    }
    .region-featured .block {
        width:50%;
        float:left;
    }
}


This will float two blocks side by side when the overall width is greater than 760px. If you have a fixed width site, then remove the media query. Also note the clearfix styling (when using a layout manager it will just be a class) which ensures that the region wrapper grows vertically to enclose the blocks. 

The width of the block was set to 50% because there are two blocks that I wanted to float next to each other (100% / 2 = 50%). For three blocks you will set a width of 33.333333% etc.

When using a layout framework (recommended, and mostly baked into the theme), then it will all just be a matter of assigning proper classes, so you would then need to assign a region-class in the page template to the region, and assign classes to the blocks, perhaps using a module like Block Class, or also inside the block or region template file.

For a theme with a baked-in layout framework, look at Bootstrap, amongst numerous others. It is extremely easy to use, but you must familiarise yourself with the official bootstrap documentation. Bootstrap is not Drupal specific. It is just a framework that the Drupal Bootstrap theme developers adopted.

For more CSS solutions on aligning Divs horizontally, How to Align Divs Horizontally in CSS