Floating Boxes

Introduction

Floating boxes can be created by using the 'top', 'bottom', 'right', and 'left' attribute(s) for positioning the box. This is not to be confused with Float, which only deals with things INSIDE of a page, floating boxes can put things ANYWHERE on the entire wiki setup. On pages, you can put boxes floating on the top of the screen like the one on the top right of your screen you see.

Hello! This is a floating box.
You can also add more coding for fonts, backgrounds, colors, etc!

Code:

<div style="position: fixed; top: 100px; right: 100px; padding: 3px; background:radial-gradient(blue, purple); border: 2px double white; width: 175px; color:white">Hello! This is a floating box.<br>Text Goes Here</div>

You can change the "right" to "left" to make it appear on the other side, and 'top' to 'bottom' to make it appear closer to the bottom of the page. The Color of the background can be changed or you could make it a Gradient (like it is right now). You can change the color of the font by doing the color code in the text because there is no spot for it in the code itself.

All the words beneath it will be put into the box until the coding is closed by an ending </div> tag.

This is a floating box with an image background!

Sometimes you can't include some attributes that you want in the code, or you've already coded something that you want to float. In that case, you can code something like a normal "box", and then make it float.

Code:

<div style="position: fixed; top: 100px; left: 100px;">Content</div>

Example (With an image background):

<div style="position: fixed; top: 100px; left: 100px;"><div style="border: solid 7px white; box-sizing: border-box; overflow: hidden; position: absolute; width: 100%; height:100px; max-width:250px">
<div style="margin:0px;">[[File:Night_sky_2.jpg|center|link=|250px]]</div></div>
<div style="padding: 20px; color: white;font-weight: bold; font-size: 15px; position: relative; max-width:250px">This is a floating box with an image background!</div></div>

Look at the top left of the page to see the box!

When using floating boxes in tabs, keep in mind that it will show up on only that tab. To make it always appear on the page, either place it outside of the tabs or place it separately on each tab (works in both tabview and tabber).