Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »


EditLive! provides extensive support for content sections (also known as DIV tags). As a user you can create and remove sections, and even create sections within other sections. EditLive! can help you to apply styles to a section, set the width of a section, or wrap text around floating sections.

This topic explains how to achieve the following:

To apply a style to a section, see the Applying Predefined Styles section of the Applying Styles article.

Creating an empty section

Creating an empty section can be done anywhere; even inside another Section.  Simply place the cursor where you want the section and select Create Section (DIV) from the Insert menu:

Creating a section around existing text

Sections can be created around existing text in much the same way as empty sections.  Sections can be created on entire paragraphs or a selected portion within a paragraph.


Select a portion of text in the middle of a paragraph:

Creating a section will split the paragraph around the selection and create a section in the middle:

Creating nested sections

EditLive! supports not only creating sections in paragraphs but also within existing sections.


Highlight the middle paragraph of a section:

Creating a new section will not alter the outer section, instead nested a new section inside.  Notice that the paragraph spacing has been removed to avoid unnecessary spacing:

The nested section in the above screenshot has been shortened to better show the resulting structure.  New sections will always expand to the full width until resized (see Resizing Sections)

Removing Sections

Use the Remove Section command will remove the innermost section at the cursor position.


Begin with our nested section from above:

Selecting Remove Section at that point will restore the outer section to the way it was before we added the nested section:

If instead the cursor was in the outer section, it would be removed instead:

Section Properties

EditLive! allows basic editing of section attributes.  Right click on a section and choose Section Properties... to show the Section Properties dialog:

  • Alignment - Float sections left or right
  • Width - Change the width of the section, using either pixel or percentage units
  • ID - Set the section identifier attribute

Floating Sections

Floating sections are often used for page layout, and allow text to flow around the section.  EditLive! supports creating floated sections using the alignment option of the Section Properties dialog, above.


Start with the previous example, containing three paragaphs and a section in the middle:

Use the Section Properties dialog to align the section left:

This brings the third paragraph up next to the second paragraph:

Continuing to type in the third paragraph will flow down to the line below the second paragraph:

If the second paragraph (inside the section) is then extended to two lines, the third paragraph layout will change to flow around it

EditLive! will update the page layout as you type in or resize the floated section.  For best results, always specify a width for floating sections.  Variable width sections can be difficult to predict, particularly if a user changes the default text size of their browser.

Resizing Sections

Sections can be resized either via the properties dialog or by holding the mouse cursor over the edge of a section (much like Images and Tables).  Only the width of a section can be changed, the height of a section is determined by the content within it.

  • No labels