Internet Explorer and column collapse

So, you have built a beautiful CSS layout. It looks great. You feel powerful, knowledgeable and wise. Then you start adding real content to the layout – images, lists, links etc.

Suddenly you layout does not look so great in Internet Explorer. For some reason columns are wider. In some cases the column width increases so much that the entire layout breaks and the column drops below the rest of the content. Your confidence is shattered. You curse CSS and think about table-based layouts. At least they “work” in IE.

Here is a possible solution.

Date: 23 March 2007
Author: Russ Weakley
Category: Articles, CSS, HTML, Web, Web standards
Tags: , , , , ,

Comments so far

  1. Mauricio Samy Silva says:
    March 23, 2007 at 5:24 am

    The fix for *url strings which are still cut off to some degree* is to *give layout* for the UL element.
    For example: assign width:100% (or other CSS declaration that triggers hasLayout = true) for UL and the complete URL string will be revealed in all his glory.
    As a rule of thumb it’s also a good idea to *give layout* for relative positioned elements in IE.
    See: “On Having Layout” at: http://www.satzansatz.de/cssd/onhavinglayout.html

  2. Russ says:
    March 23, 2007 at 6:02 pm

    Good point – forgot this. Fixed now with a credit to you based on your suggestion.