Russ Weakley
23-Mar-07
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.
