CSS: on floating divs and negative margins

Question

So I wanted a centered, constant width, three-column layout that was compatible with IE and whose columns would stretch to all be of equal height (equal to the height of whichever column had the tallest content). I know- keep dreaming, right?

Well I almost figured it out. After combining the techniques I found here on Stack Overflow with a nifty CSS hack for fixing width issues and the text-align trick for centering, as well as experimenting with different margin/padding values, I have a nearly perfect layout. I'm doing this for a friend's aunt and you can see what I have so far at www.allfourseasonslawncare.com/index.php (The index.html is her original site which she paid someone $500 to make for her. I'm re-creating the page using CSS)

The only bug I'm getting now is that in IE the left column has about a 30 pixel left margin, and all elements inside of the left column have a second 30 pixel left margin.

I can easily fix this using the html>body trick to give a larger negative margin to IE, but I'm trying to figure out where this magical margin is coming from so I can look for another solution. Any ideas?

Answer 1

It might be because your ul elements have a 30px margin. Try adding a span to each list item and then add the padding.

Also, about the layout, you shouldn't need to add margin to each column (I see you have margin on .leftRail, .rightRail, etc). I noticed your .columnWrapper element is only 615px wide, thus you're using negative margin to move these elements.

Instead, you can use a clearfix hack to effectively float elements. (Link for the CSS is below, paste it into the bottom of your CSS file)

After you placed the clearfix in your css, then you go to your wrapper div that is wrapping all of the columns and simply place a class="clearfix" on it.

Then, you just float each column left (float the .rightRail right), specify widths and voila! It should be a 100% working, less-hacky solution.

When you hack too much, IE tends to bug out. Comment if you need any help.

---

Clearfix: http://gist.github.com/550114

Answer 2

So I spent an hour or two yesterday wrestling with it and I spent another hour this morning (posting updates as I started to get closer as comments to my own question) and I've finally figured it out.

In Internet Explorer, the "width: 100%" command is interpreted as the entire width of the parent element, not the width minus padding. This was giving the table a width of 615 pixels (the width of the center column). Seeing that this would stretch beyond the container, Internet Explorer respected only the left padding and the table stretched 15 pixels (the size of the left padding) beyond the right side of the column.

Since it stretched outside of the column, this re-arranged all floating elements in a way that to Internet Explorer seemed logical. That being, for some ungodly reason, moving the left rail the distance of the right padding (15 pixels) to the right of the left padding (15 pixels into the center column), thus moving it a total of 30 pixels into the center column, or the magical 30 pixel margin.

The solution? I'm still working on this. I moved the padding from the #content div to the #center div as an experiment and this caused the issue to arise in Chrome while simultaneously resolving it in Internet Explorer. At least the primary question was answered, though. We now know where the magical 30 pixel margin was coming from. As a quick solution I've set a constant width on the #content div of 585 pixels and given it margins instead of padding.

#center{
    float:left;
    width:615px;
    margin-right:-615px;
}
#content{
    width:585px;
    margin:10px 15px 10px 15px;
}