Creating a Div Container

This website contains links to software which is no longer maintained. For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

In CKEditor some formatting settings can only be applied to block-level elements. Sometimes it is also useful to be able to apply formatting to a larger document fragment that extends beyond one block. If this is the case, a standard practice is to add a div container around a document fragment.

Note that using div containers, just like other HTML elements, along with CSS styling, is an advanced feature that should only be used if you have sufficient knowledge of both Web standards.

To add a div element to your text, press the Div Container toolbar button. The Create Div Container dialog window that will open lets you set configuration options that define the stylesheet ID and classes as well as other advanced properties.

For general information on using dialog windows please refer to the Dialog Windows section of the User's Guide.

The Create Div Container dialog window includes two tabs that group div options:

General Tab

The General tab lets you manually add a stylesheet class that will be applied to the div element. Note that a div element might be assigned more than one class. If this is a case, separate class names with spaces.

If the system administrator defined some additional styles in the default.js file for the styles plugin, you will be able to choose the style from the Style drop-down list. After you choose a style from the list, the Stylesheet Classes text field will be populated automatically.

General tab of the Create Div Container dialog window

Advanced Tab

The Advanced tab lets you configure additional div element options such as assign it an ID, a language code, a text direction, a tooltip, or CSS style properties. It is meant for advanced users with knowledge of HTML as well as CSS, and gives nearly endless possibilities as far as the presentation of the div element is concerned.

Advanced tab of the Create Div Container dialog window

Below is the overview of all Advanced tab elements:

  • Id – a unique identifier for an div element in the document (id attribute).
  • Language Code – the language of the div element specified according to RFC 1766 (lang attribute).
  • Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon and individual properties should be separated with spaces.
  • Advisory Title – the text of the tooltip that is shown when the mouse cursor hovers over the div element (title attribute).
  • Language Direction – the direction of the text: left to right (LTR) or right to left (RTL) (dir attribute).

Using Div Containers

To illustrate the idea of adding div elements, let us assume that we have a sample document that contains three paragraphs and a list.

A sample text created in CKEditor

As visible on the elements path, when the cursor is placed in the second paragraph, the hierarchy of HTML elements includes just the html and p elements.

Suppose we wanted to apply the same styling to a fragment of this document, namely the first two paragraphs and the list. We could select these elements and then add various formatting features to the selection. If, however, at any time in the future we wanted to change the styling of this text fragment, we would need to laboriously select it again and modify the formatting piece by piece.

There is, however, a better way to achieve the same result. We can select the same fragment and place it inside a div container that will serve as a placeholder for all styling rules that we might come up with, both now and in the future. By adding a stylesheet class to this container we can even control its properties with an external stylesheet.

In this example the first two paragraphs and a list were selected, and then placed inside the div container created with the Div Container toolbar button. Once created, the div element received a class named mydiv and a style that adds a pink background color to all its content.

A div container added in CKEditor

The div element is now also visible on the elements path. If we check the document source, we will see that it encloses the previously selected text elements and has a class as well as style definition applied to it.

The source code of the document in CKEditor
This page was last edited on 11 March 2011, at 10:41.