Boxes

Boxes are a Design elements, used to surround other elements to style them or place them in specific locations. Boxes can be added in a few different ways.

Positioned Boxes

A "Positioned Box" is one that can be freely moved around the page and does not depend on the position of other elements (except under specific circumstances). A positioned box is actually a <div> element that has an absolute position.

Adding a positioned box is done through the Toolbar using the icon. They can be moved by dragging the borders, and resized using the handles on the sides and the corners. They can be styled using the Format -> Box menu item or through the CTRL+M keyboard shortcut.

Inline Boxes

An "Inline Box" is one that is placed within the text stream, where other elements (including text) can wrap around it. An inline box is actually a <div> element that has the float css property.

Adding a positioned box is done through the Toolbar using the icon. They cannot be moved but can be resized using the handles on the sides and corner. They can be styled using the Format -> Box menu item or through the CTRL+M keyboard shortcut. Their position can be changed using the (float left), (no float) and (float right) icons, which changes their position within the text.

DIVs

The "Div" is the element used to create Positioned Boxes and Inline Boxes, but it can also be added manually and styled for those who prefer this method. To add a div, use the Insert -> Structural Elements -> Div... menu item. By default, a div element reacts pretty much like a paragraph (<p>) or an inline box set to "no float" except that it can be resized directly. They can be styled using the Format -> Box menu item or through the CTRL+M keyboard shortcut.