One of the biggest advantages of writing articles in an XML editor is the ability to dynamically arrange your content, and ensure that it looks good on any screen size. Using a few simple styles, you can pop out elements, highlight parts of an article, or even organize an article into multiple columns, including images. 

It's tempting to use tables to place things next to each other and organize content into grids, but tables simply aren't designed for that kind of content. They're optimized for short bits of data, and using them to position a newsletter can create more display issues than it solves. Today we'll walk through wrapping elements in <div> tags and using those tags to move your content around the page so you can have a clean layout that's consistent across devices. 

<Div> tags

To move anything, it's a good idea to wrap it in a tag. That tag will hold all of the styles we apply to the item, which will be applied to anything inside the tag. To wrap an item in a div, access the code view of the editor, and select a particular section of text. Typically it will be contained in <p> tags, which indicate that it's a paragraph. Before the <p> tag, add a <div>, and after the closing </p> tag, add a </div> to close it. In practice, this: 

<p>This is the text I want to adjust.</p>

Becomes this: 

<div><p>This is the text I want to adjust.</p></div>

The <div> is a container, and ensures that any changes are only applied to that container. For example, we can add an indent to it, with the following format: 

<div style="margin-left: 15%;"><p>This is the text I want to adjust.</p></div>

Width

Within the style element on the <div>, all manner of CSS can be added. When positioning content, one of the most important is width. Width can be expressed as a fixed value in pixels, but it's better to use a percentage, which will adjust itself accordingly for any device viewing your digital workplace. For example, a <div> with a width of 50% will take up precisely half the container it's in, like this: 

<div style="width: 50%;"><p>This is the text I want to adjust.</p></div>

Floating

<div style="width: 20%; float:right;"><p>This is a sidebar.</p></div>

With the width set correctly, you can position elements to sit in columns, or create sidebars to your text. Use this to highlight important points, or include links to supporting material. The float property specifies a direction, and you can use it to easily move a block of text to the left or right of the main body. 

Using the 50% width property from above, you can also use float to create multiple columns of text, letting you configure our article like a newsletter. 

<div style="width: 50%; float:right;"><p>This is column 2</p></div>

<div style="width: 50%; float:right;"><p>This is column 1</p></div>

These methods will let you arrange elements of articles as you like, while maintaining a consistent look and feel. You can also create custom classes and assign specific widths and floats to them in your global Appearance settings, and make it easy to create sidebars by adding those classes to items. 

If you have questions about the Igloo platform, workflows, or best practices, you can leave a comment here, or ask a question in the Community area.