How to make a block (or a region) float in Drupal?

Question

I saw that there's a module called Floating block that should do what I'm searching for: but it duplicates the floating block, making it totally unusable.

Can you please tell me some other ways to accomplish that?

Answer 1

Can you be a little more 'descriptive ?

Answer 2

By "float" do you mean have the CSS attribute "float" applied to it?

You can do this easily by looking at the HTML source code to get the Block div's id (usually "block-block-3" or something) then adding a new style is the CSS to float it.

Look for this in the HTML source to identify the correct block ID:

<div id="block-block-4" class="yadda yadda">
My block content
</div>

Then in your active theme's CSS file add an entry like this:

#block-block-4 { float: left; }

If you mean you want it to float in the same position as the user scrolls, you can use a jQuery plugin pretty easily to do that. I have used StickyFloat before with good success. Use the trick above to identify the correct block id to bind it to. Include jQuery and the plugin scripts, then bind it like so:

$('#block-block-4').stickyfloat({ duration: 400 });

Answer 3

Even better, if you use CSS correctly you can accomplish this without any additional modules or plugins.

The "Floating Block" module really only selets the block and set's it's position to fixed.

With the example above:

#block-block-4 {
  position: fixed;
  top: 100px;
  left: 100px;
}