There's a lot of things going on when Drupal generates a page of XHTML code for visitors to your site. Some of this code is generated by LiteJazz, some by the modules you have installed and enabled, some by Drupal itself, and some by your unique site content. If one component of this process is broken, the entire page can fail to render properly.

Broken layouts are the result of invalid or incomplete markup somewhere in the page. The most common problems occur whenever there are one or more unclosed HTML elements in the page. A single <div> without a matching </div> can cause the entire page to 'fall apart'.

There are many possible sources of such incomplete markup. But there are three sources of layout problems that we encounter so frequently that they warrant special attention.

Broken Layouts caused by teaser breaks

The default home page for a standard Drupal site is a list of node teasers. A teaser is simply the beginning portion of a node. Drupal doesn't really store a separate teaser. It simply marks a point in the node content called the teaser break. Whenever Drupal displays a node teaser, it displays the content of the node up to the teaser break.

You can configure the point in a node where Drupal will insert teaser breaks to some degree. The Post Settings page (admin/content/node-settings) allows you to set the default teaser break location to occur after a fixed number of characters (i.e. insert teaser break after 200 characters.) You can also set this value to Unlimited, which will disable node teasers. By default, a standard Drupal install will insert teaser breaks after 600 characters.

Be aware that changing this value will not change the teaser break location for existing nodes. It will only change the default value imposed on newly created or edited nodes.

Teaser breaks aren't really a problem if your nodes contain nothing but plain text. But what if your nodes contain HTML code? And what if this HTML code includes tables or divs that span across multiple lines. And what if Drupal decides to insert a teaser break right in the middle of that HTML code? Things could turn ugly.

If your nodes contain anything other than plain text, then the Drupal default mechanism of arbitrarily inserting a teaser break after a fixed number of characters probably won't work for you. There are essentially three effective alternatives.

If you don't want or need teasers, then change the Length of trimmed posts value to Unlimited. Drupal will not insert teaser breaks, and thus an improperly trimmed post will never break your layout.

Another option is to manually insert teaser breaks by including the string <!--break--> at an appropriate point in your node content. The presence of this manual teaser break in a node will override the default Drupal teaser behavior. See this drupal.org handbook page for further information.

A third option is to install a module that automatically corrects invalid HTML code, like the HTML corrector. This module is so useful that it's been made part of the Drupal 6.0 core.

Broken Layouts caused by WYSIWYG editors

Many Drupal users install a WYSIWYG editor so that they can format their site content without having to manually create the HTML code. Editors such as TinyMCE and FCKeditor are basically mini-HTML editors for Drupal node content.

The code generated by these editors contains HTML markup... sometimes, a LOT of it. As such, nodes created with such editors are particularly susceptible to the teaser break issues described above. If you are using one of these editors, then you should absolutely also be running the HTML corrector module.

Broken Layouts caused by over-sized content

This one is simple to understand. If you publish a block that contains a 600-pixel-wide image to a sidebar that is configured to be 300 pixels wide, something has to give.

There are things that we could have done to LiteJazz in an attempt to 'contain the damage' caused by such situations (like applying the overflow:hidden attribute to blocks.) However, such attempts would inhibit the ability to use the theme in creative ways (like using negative margins to make an image 'break out' of a block's boundaries.) So we've chosen to make you, the content provider, responsible here. Ensure that your content is compatible with your layout.