Templates FAQ; Why Do DIV Columns Jump / Get Pushed Down / Get Pushed Aside?

[kwak]

Why Do DIV Columns Jump / Get Pushed Down / Get Pushed Aside?

A Description Of The Visible Symptoms

You have a template with fixed width columns.  In Firefox there is one column too wide which pushes the other columns too far to the right.  In Internet Explorer (IE) an entire column "jumps" down / gets pushed down on the page!  This is quite startling and mystifying when first seen.

What Causes This Phenomenon?

Entire columns moving around occurs when fixed width columns are implemented with html DIV elements as the containers for the columns.  Typically the template layout only provides enough room to exactly fit the fixed width DIV elements (columns).

DIV elements however do not respect the width setting.  If something is contained somewhere inside of a DIV that is wider than the container, then the DIV container automatically grows in size, even if the container width was specified exactly with a given number of pixels.

Browser Behavior

In Firefox, when a DIV element is wider than the space it is allowed to fit in, all of the DIVs to the right will be pushed out further.  This will manifest as columns which do not exactly line up with other fixed width components in the layout.

In IE, when a DIV element is wider than the space it is allowed to fit in, the browser will move the DIV downward on the page until there is enough width for the DIV to fit.  Notice that the top of the moved DIV is below the bottom of a neighboring DIV.

The Joomla Default Template Has This Behavior

The rhuk_solarflare_ii template is provided as (one of) the default template with Joomla 1.0.x.  Unfortunately it uses a completely fixed width layout using DIV elements and exhibits the behavior described above.  Since this default template is pretty nice many folks adapt it for use on their site and inherit this problem.

What Triggers This Behavior?

There is something in your content that is too wide for the fixed width of the column containing that content.  It could either be occurring in the column which moved or the column next to it.

What Should I Do?

Some people choose simply to increase the overall width of the template.  This often does not fix some of the alignment problems originally caused by content being too wide.  And it will not fix the problem if content becomes even wider and pushes a column down in the future.  For many designers, increasing the width of the template is not acceptable.

The real solution is to track down what content is too wide for the column it is in.

Debugging

There are a couple of quick ways to track down which column is too wide.

1) Open the same page in IE and FF.  (These browsers by nature have different rendering rules.)  Shrink one of the windows down so you can lay it on top of the other browser and line up the columns and eyeball it to see which columns don't match in width.  Example, is the left column in IE the same width as the left column in FF?

2) Use the ruler feature of one of the debug tools to measure how wide each column is and compare them with each other, and with the column widths specified in the template.

3) Use one of the debug tools to display the width of the various columns.

Once you know which column is too wide it is time to look at the content of that column and determine which items is too wide.  A handy way to look for items which are too wide is to use one of the debug tools mentioned in the Templates FAQ which has the feature of showing outlines.  Typically there will be one item which has an outline wider than all of the other items in that column.

Summary

Knowing what is causing the jumping / pushed down behavior will help you understand what to look for so you can find and fix the real problem.