IE6 disappearing float

[cczernia]

I redesigning some elements in wordpress and created a three column layout using divs. However, the last column disappears in IE6 and I can't figure out how to bring it back. Here is the main CSS for the disappearing column. Note that I added height: 1% and display: inline as possible bug fixes (with variations of using one or the other) and it didn't fix it.

Page link (http://www.triodisplay.com/press/category/jeffs-retail-blog/)

CSS link (http://www.triodisplay.com/press/wp-content/themes/classic/style.css)

#jeffbar {
position:relative;
width: 200px;
float: left;
display: inline;
height: 1%;
color: #666666;
margin-top: 25px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #666666;
padding-left: 7px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
}

Second column CSS that overrides the CSS in style.css (found in the main page)

#content {
width: 420px;
position:relative;
float: left;
}

[aj_nsc]

I'm not 100% sure, but what i would bet is that the default padding applied to some objects in IE6 is messing up your float. It is technically, I suppose, behaving as it should in the sense that it is not allowed to 'float' there because there is not enough room on the right (due to IE6 default padding) and is therefore getting pushed down.

Now that you know the problem, the solution is up to you. you could try something simple like


body {
margin:0;
padding:0;
]


at the beginning of your style sheet. That should take care of it. If it doesn't, come back and post again, there are other ways to resolve your padding issue.

[cczernia]

Hmm, I didn't notice it getting pushed to the bottom. I tried the fix and it didn't work. I also reduced the width of #content by 200px and it didn't work either.

[KDLA]

I suggest you take the float out of the middle column. You don't need it. You only need to float the two sidebars. Then, take the width out of the content div; it will stretch to fit whatever area's left.

Also, the correct method for canceling out the padding that aj mentioned is accomplished with this:

* {margin: 0; padding: 0;}

[aj_nsc]

geez, I apologize, KDLA is correct, I messed that one up. :eek:

[cczernia]

Ok, I removed the float and width styles from #content. Now it pushes the right column to the bottom in all the browsers.

I suggest you take the float out of the middle column. You don't need it. You only need to float the two sidebars. Then, take the width out of the content div; it will stretch to fit whatever area's left.

[KDLA]

Are you sure? It looks fine in mine: Fx2 and IE7.