Float Clear IE Problem

[timhisu]

I've got a problem with IE putting too much padding/margin around an element if I clear:both it.

#header {
background: #c00 no-repeat;
float: left;
margin: 0;
padding: 0;
}

#logo {
float: left;
width: 220px;
}

#index {
background: #996;
cursor: default;
height: 18px;
margin: 0;
padding: 0 5px 0 0;
float: right;
}

#search {
clear: both;
color: #fff;
font-size: .9em;
float: right;
margin: 0;
padding: 0 5px 5px 0;
text-align: right;
}

Any ideas? It looks perfect in other browsers I've tested in besides IE. If I take the clear:both out of the #search div, it puts it between the logo and the index divs.

Any help is appreciated

[edited by: SuzyUK at 1:42 pm (utc) on July 22, 2004]
[edit reason] ooops sorry no URLS see TOS #13 [webmasterworld.com] [/edit]

[D_Blackwell]

Sounds like you need Dr.Doc's
"Taking on IE bugs" [webmasterworld.com]
I'm still digesting the suggestions.

[Span]

Hi again,

Putting the form in the #search div and taking out the float:right;? Have you tried that?
And I think you need to add a clearing break after the #search div to make the header div encompass the floats and the #search div.

br.clear {
clear:both;
}

<br class="clear" />