IE6 Float Drop in the California State Web Template


A question that recently came up in one of my CSS classes was about the California state web template that was created to standardize state websites.  The template can be downloaded at webtools.ca.gov and you can see live working copies of the customized versions of the template in many places, including:

The template is distributed with three optional column based layouts.  The webpage author can select a style sheet appropriate to the layout they are interested in: one, two, or three columns.  One of the problems with the three column layout in the state template is something known as float drop and you will only see it in Internet Explorer (IE) 6.

Float drop is a phenomenon that occurs when you have a floated element on a page and the width of the page become too small to accomodate the floated element and its neighbors.  Instead of displaying as they should, one of the elements will drop down below the other content.

For example, see this Department of Transportation webpage at full screen width:

Caltrans 3 column page at normal width
Figure 1

However, this is what it looks like on a lower resolution monitor.

Caltrans 3 column page at low width, float drop is evident
Figure 2

See how the middle column drops down below the right?  To prevent this from happening, they have added the following rule to the master css file attached to the state template:

 


#heading, #navigation, #main_content_1, #footer {
min-width:774px;
}

 

This means that those four div tags, which hold the main content of the page as well as portions of the header and footer, will never fall below 774 pixels in width.  This preserves the layout when the user’s screen width is too small, rather than having the elements  stack on top of each other.  The problem with this method is that IE6 does not honor the min-width property.  Thus, what looks lovely in Firefox and IE7 looks like Figure 2 in IE6.

When my student came to me with this question, I went in search of an answer.  The solution I came up with is the following code sample, which can sit anywhere within the head tag of your document:

 

<!––[if IE 6]>

#main_content_1, #heading, #nav, #footer { width:
expression(Math.max(document.documentElement.clientWidth, 774)+'px');
}

<![endif]––>

 

Internet explorer allows you to embed JavaScript within CSS by using an expression, so we can set the width property equal to the result of an expression.  That expression checks to see which value is larger, 774 pixels or the width of the page?  Whichever is the larger of the two will be the new value for width.  This entire rule is embedded within an IE6 conditional comment (<!––[if IE 6]> … <![endif]––>), so that only IE6 will obey these instructions.  Since the expression function is proprietary, the conditional comment also serves the purpose of leaving our current CSS in a standards compliant state.  Simply embed this code snippet into the head of your three column pages and voila, no more float drop!

Comments

  1. Carol Greenwood Says:
    November 5th, 2008 at 9:26 am

    Very nice!

  2. This is the strongest insight I’ve heard about this topic!

Leave a Reply