So far, these instructions have covered how to create Turbo Blocks. You can put a Turbo Block inside another Turbo Block, but just doing that won't create a cluttered feel, like a messy pile of notes on a disorganized researcher's desk — to do that, some of them need to be moved to the left and right.

That can be done using offset classes. The Turbo Vision theme provides classes for moving something to the left:

• "offset-left"
• "left-1"
• "left-2"
• "left-3"
• "left-4"
• "left-5"

…and to the right:

• "offset-right"
• "right-1"
• "right-2"
• "right-3"
• "right-4"
• "right-5"

To move something to the left, wrap it in a div with two classes: "offset-left", and then one of "left-1" through "left-5", depending on how far to the left you want it moved. "left-1" will only move it a little bit, but "left-5" will move it a lot — all the way to the left-hand side of the screen.

To move something to the right, it's exactly the same, but swap out "left" for "right".

If you've worked with CSS before, you're probably thinking that using up too much horizontal screen space is a very dangerous game — these offset divs are going to look terrible on mobile.

Have no fear! On small screen sizes, offset divs will be placed closer to the middle of the page, and on very small screen sizes, the offset will be turned off altogether.

For authors, this means that while mobile users will always see all of the content you put into offset divs, it might not look as cluttered as you intended it. Always test your design on mobile before you publish it to check that the reading experience is solid for everyone.

To create an offset block, combine two of the above classes, to determine the offset direction and intensity:

If you want to offset a Turbo Block, put it inside the offset block (don't add the offset classes to the Turbo Block directly):

If you're on a wide browser (e.g. desktop), the above example is on the left. If you're on a thin browser (e.g. mobile), the above example is above this text.

Because the offset block is a different element to the Turbo Block, this means that you can actually offset anything you like, just by putting it inside a div with offset classes. Try offsetting an image turbo-block!

Offset blocks work using the CSS "float" property. When a HTML element is floating, stuff underneath it is pulled upwards to fill the space that it leaves behind.

This isn't always desirable. Maybe you want a floating offset block, but you want the text underneath it to appear where it would be if the offset block wasn't floating. This would leave a big gap for you to put something else there, if you like.

You can do this using the CSS "clear" property — a practice that's commonly referred to as a "clearfix". Wikidot lets you do this with 4 tilde characters (~~~~):

This text isn't pulled upwards to fill the space, resulting in a big gap on desktop. On mobile, of course, there is no change.

Here are examples for all the different offset combinations.

There are certain circumstances in which you shouldn't use some of the offset classes. You still can, of course, but it will have an adverse effect on your page.

Which classes are available to you depends on the position of the sidebar and whether or not the page content is center-aligned with respect to the browser viewport. It also depends on whether you are using this theme in 'theme mode' or 'component mode' — please review the usage instructions at the very top of the page for a reminder of which is which.

If you are using the Turbo Vision theme in 'theme mode', it comes with Визуальный элемент Toggle Sidebar , which center-aligns the page content and frees up as much horizontal space as possible. You may freely use all of the offset classes.

If you are using the Turbo Vision theme in 'component mode', it does not come with Визуальный элемент Toggle Sidebar by default. This limits the horizontal space.

If you are using Toggle Sidebar anyway, your page body is center-aligned. You may freely use all of the offset classes.

If you are not using Toggle Sidebar, the page body is on the right-hand side of the page. You should avoid using any of the right-hand offset classes, as they may go off the edge of the screen. You should also avoid using any left-hand offset classes near the start of the page, as they may overlap with the sidebar.

If you are using Тема Black Highlighter, the page body is centered, so you may freely use the right-hand offset classes. However, the sidebar is present throughout the entire document, so you should avoid using any of the left-hand offset classes.

If you are using BHL and BHL Toggle Sidebar, this frees up the space on the left, so you may freely use the left-hand offset classes as well.

In short: avoid offsetting to the left if there is a sidebar, and avoid offsetting to the right if the page content is not centered.