Floated block styles

This image is in a {right_2} block so it floats in the margin to the right of the content.

The default document is 4 grid units wide, with a 2 grid margin on either side. If you click somewhere on the page (not on a link) and then press G and before you let go of it press H and F then you should be able to see a grid. Press G again to make it go away once you don't need it any more.

The content which you utilise without defining anything flows down the center 4 columns in a predictable manner. However if you want to add in other information either side then you use either a {left_x} or {right_x} block style where x is the width of your floated content.

This image is {left_2} and therefore it sits in the content to the left of the layout.

Once you do this then the block detaches itself from the natural flow of the content and sits beside the content in the margins to either side.

This image is {right_3} and therefore it displaces the body content by 1 grid unit.

However, if you specify a width for the floated block that is larger than the width of the margin then the floated block will intrude onto the body content and the body content will flow round the edge of the floated image.

The floated block will do its best to appear in the vertical position where you declared it, but it will appear below other floated blocks that have been floated in the same direction and therefore it might have been displaced downwards depending on the other content that is on your page. The best way is to experiment with where you declare the image in the body content and get a feel as to how the elements interact.

This image is {left_2+in_1+down_2}

The other thing that you can do is to displace a floated block horizontally or vertically by using +in_x and / or +down_y where x is the number of grid units that you want to move a block in and y is the number of lines that the image should be moved down. This can give you the ability to have elements that are not all pushed up hard against the outer edge of the site frame, and which also do not necessarily start exactly level with the next paragraph in the un-floated content.

The combination of these two displacements can permit you to create layouts that are less formulaic than the default options and yet which still honour the underlying grid.

It is relatively complex, and hard to grasp at first but the best thing is to just experiment and work out different sets of layouts that are predictable to you and which you can use consistently on different pages to give a coherent feel to the site.