opera layout problem

<div id="header">
        <div id="logo">
            <h1><a href="http://lookaroun开发者_StackOverflow中文版dyou.net">Look Around You</a></h1>
        </div>
        <div id="search">
            <input type="text"/>
            <input type="button" value="search"/>
        </div>
        <div id="horNav">
            <ul class="horNav">
                <li><a class="home" href="#">HOME</a></li>
                <li><a class="submit" href="#">SUBMIT</a></li>
            </ul>

        </div>
    </div>

this is CSS:

#logo{
    width: 50%;
    float: left;
}
#search{
    float: right;
    width: 50%;
}


#horNav{
    clear: both;
    overflow: hidden;
    display: block;
    width: 100%;
}

it works fine in chrome and firefox but in opera it displays div#search under div#logo instead inline on oposite sides??

many thanks

I can´t reproduce the problem in Opera 11.10, see this example on jsfiddle, but there are a few possible solutions / things you can try:

1. use max-width instead of width for #logo;
2. change the order of #logo and #search in the html and remove the float and width from #logo