This article forms part of our documentation on styling your content.
The above box is an example of insert classes in action; specifically, a paragraph with the
insert class applied. The classes let you position elements and style them to stand out from the rest of your content.
This is a menu
Here’s another example: a menu created by applying the
insert classes to a
div element, wrapping a header and an unordered list. Below is the code used to create the menu:
<div class="insertright insert">
<h3>This is a menu</h3>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is a third list item</li>
The basics of insert classes are this:
insertright positions an element (whether a paragraph, a
div or a list) on the right, and other content will flow around it.
insertleft does the same thing, but positions it to the left.
insert is what creates the border and background, so if you want to make a menu like the one shown above you must use both the positioning class (
insertright) and the
insert class, as follows:
<p class="insertright insert">Some content.</p>
This is an Insert by Itself
You can use the positioning classes by themselves, of course—for example as we’ve done here to create the header on the left.
Advanced users can restyle these classes to suit their personal tastes by using an alternate style.