Allign block content next to title - CSS

Question

My goal is to display a button group to the right of the page title. Currently it resides in region-content, which wastes space. I tried adding my own class to the div that contains btn-group class and use margin-top to move it up, but as soon as I save content, I get system help message that overlaps with the button group.

I also tried to add the block to other regions and get same thing if, say, I use breadcrumbs.

What's the best way or what are the classes I should use to position my block with button group to the right of the page title in main-container instead of region-content?

Answer 1

Okay, so after looking at your demo, there's a couple things you can do.

The easiest method is to simply float #block-block-16 right, float .page-header left, set #block-system-main to clear: both, and be done with it.

But that's not great because we are kinda circumventing div.region.region-content by doing that. It'd be better if the header and the buttons actually shared a common parent. That seems to be what you truly want to do here. We can accomplish that with some JavaScript. That will also help with the minor problem the first solution introduces of having your gray underline not stretch across the page.

$(function() {

  $('#block-block-16').insertAfter($('h1.page-header'));
  $('#block-block-16, h1.page-header').wrapAll('<div id="top-container" class="clearfix"></div>');

});

From here, again we'll just float the buttons right and the page header left as before.

We can also take care of some details and clearfix the new div (included in the JS) and perhaps change our bottom border from being set on the h1 to being set on our new div, so that it stretches across the page, below the header and buttons.

You may also choose to remove the 9px padding-bottom on the h1 and instead change that to a 9px padding-top on div.region.region-content.

Hope that helps!