Why is float right appearing below float left?

Question

I have some navigation links, which are image buttons, that I have applied float: left to, and I have a login field. The login field, which I have applied float: right to, is appearing below the navigation bar. How do I make them side by side?

body {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    color: #FFFFFF;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    background-color: #000000;
}

#wrapper {
    margin: 0 auto;
    width: 80%;
}

#top {
    border: medium dashed #F40408;
    text-align: left;
    width: 1500px;
}

#navigation { 
    -webkit-box-shadow: 0 0 20px 3px #E006F5;
    box-shadow: 00 0 20px 3px #E006F5;
    width: 1080px;
    height: 50px;
}

#navigation ul {
    list-style-type: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom:0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#navigation a {
    float: left;
}

#login {
    float: right;
}

Thanks, Mike

Answer 1

很难想象，因为没有提供html代码，但是我认为尝试添加position: absolute ，并且使左/右浮动的计划将正常工作。