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 now 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.

Of course, there is a solution.

I was discussing this problem recently with Cameron Adams who suggested that negative margins could be the answer. He was, as always, right... with some simple additions.

Three steps to freedom from IE column collapse

In sample 1 (below), all browsers except IE will render the column to the correct width and allow wider elements to poke out the right side of the container.

However, IE honours the width of the content rather than the container, so the container is much wider.

• Sample 1
• Screenshot 1 (Internet Explorer)

Step 1

Add negative margins to the right edge of all elements being affected. In this sample, the affected elements include an unordered list, an image, a <div> and a table.

#column img { margin-right: -500px; }
#column ul { margin-right: -500px; }
#column div { margin-right: -500px; }
#column table { margin-right: -500px; }

• Sample 2
• Screenshot 2 (Internet Explorer)

We have tricked IE into thinking that the offending elements are very narrow. IE will now render the container to the correct width.

The width is specified to "500px". This unit can change to suit your needs. If you have one image poking 100px out the right edge, then you will only need a negative margin of 100px. A large amount is a safer option if you cannot be sure of the column width or possible content inside.

Before we move on, you can collapse all of the rules above into multiple selectors with the same declaration block:

#column img, #column ul, #column div, #column table { margin-right: -500px; }

You've probably noticed that the elements have been cut off in IE. So, let's deal with this issue.

Step 2

Apply "position: relative" to the relevant elements.

#column img, #column ul, #column div, #column table
{
margin-right: -500px;
position: relative;
}

• Sample 3
• Screenshot 3 (Internet Explorer)

Most of the elements are now rendering correctly. However, The the url strings are still cut off to some degree, so we need to fix them.

Step 3

As suggested by Mauricio Samy Silva, we need to give the <ul> element some dimension to overcome IE's hasLayout issues. This can be achieved using:

#column ul
{
margin-right: -500px;
position: relative;
height: 1%;
}

• Sample 4
• Screenshot 4 (Internet Explorer)

The url strings are now visible!

A simpler method

Some people may prefer the elements to be cut off rather than poking out. In this case, you can ignore the steps above and simply apply "overflow: hidden" to the entire column. The overflow hidden option is much simpler to apply, as it does not involve styling any of the affected elements.

#column { overflow: hidden; }