IE6 fix for column lengths?

added material bumps col 3 down

[Georganna]

I'm sure there's a simple fix, but it escapes me. My client's site looked fine until I added material to end of the middle and right columns. Now in AOL and IE6, the right column material is pushed down to start at the level where the middle column material ends.

See < sorry, no urls >

This is the code at the transition point:

</blockquote>

<div class="clearer"></div><!--useless attempt at fix-->
</div><!--ends middle column-->

<div id="right-sidebar">
<h2 class=sidebar-title>Contact Information </h2>

All clues will be greatly appreciated!

Georganna

[edited by: tedster at 2:01 am (utc) on July 26, 2008]

[Marshall]

If you are using 3 column floats in a wrapper, that could be your problem as it has happened to me. If you push the limit of the widths of the columns inside the wrapper, the default margin and padding settings of IE6 throws it off. I have discovered you have to allow at least 2 extra pixels in your calculations. For example:

Trouble layout -
wrapper 900 pixels wide, margin and padding 0
each column 300 pixels wide, margin and padding 0
- this will probably result with the problem you are describing.

Workable layout
wrapper 900 pixels wide, margin and padding 0
each column 296 pixels wide, margin and padding 0
- this should resolve the problem.

Remember, the padding affects the <div> actual width, so if you have a div 300px wide with 5px padding, it is actually 310px wide (same with margins and borders).

Marshall

[Georganna]

Thanks, Marshall. Yes, I am familiar with that problem. The current difficulty did not occur until I added material at the end of each column (not affecting width as far as I can tell), making both the middle and right columns longer (no height set, though). It perplexes me as to why the layout works on all other pages, and why it worked previously on the problem page.

I do admit I have padding and margins set to make the text look right. Oh, please don't tell me I need to start from scratch! I'll keep your advice in mind, though. Thanks so much!

[edited by: tedster at 4:15 pm (utc) on July 26, 2008]

[Marshall]

I find H tags are the worst offenders followed by P. Just my experience. You may want to try zeroing out the margins and padding on those tags in your css then create new defaults:

h1, h2, h3, h4, h5, h6, p {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
margin: 0 auto 10px auto;
padding: 5px;
}

for example.

And if you have images, it is always good to add
img {
border: none;
}

That can otherwise cause a problem too.

Marshall