CSS3 Navigation Bar: Float:Right

Question

I'm creating and designing a mini social networking website for our school's Science Fair, and I already have a problem at the designing stage. :(

So I've created a few PSDs on how my website should look like, but it seems harder to translate my designs into HTML/CSS. My current trouble right now is this navigation bar that isn't cooperating with me...

In short, this navigation bar is very simple; the logo, with the title, a subtitle, and a few menu options (Login, Sign up). I'm using float:right; to float my options to the right, but that isn't working very well.

The options of my navigation bar are jutting out, below the Navigation Bar. It's really odd; when I take out the float:right; it seems perfectly fine, but is to the left. I would really like it to be on the right side.

A sample of the website is available at http://ticktalk.me.pn/. A PSD of the Sign-Up Page is available here: http://img1.imagilive.com/0314/tickTalk-signup.jpg.

Please feel free to "View Page Source" and investigate what I've done wrong. A direct link to the css is available at http://ticktalk.me.pn/css/style.css.

Thanks in advance.

EDIT:

This is my Navigation Bar HTML...

<div class= "navbar-header">
    <div class= "navbar-title"><a href= "#">
        tick<span class= "bookfont">talk</span>
    </a></div>
    <div class= "navbar-subtitle">
        social networking around the clock
    </div>
    <div class= "navbar-menu">
        <div class= "navbar-option login-button">
            Login
        </div>
        <div class= "navbar-option navbar-checked signup-button">
            Sign Up
        </div>
    </div>            
</div>

and this is my CSS:

.navbar-header {
    display:block;
    background-color: rgb(0, 241, 73);
    padding:10px;
    margin-bottom:75px;
}
.navbar-logo {
    display:inline-block;
}
.navbar-title {
    display:inline-block;
    font-size: 52px;
    margin-left:10px;
    margin-right:5px;
}
.bookfont {
    font-weight: 500;
}
.navbar-subtitle {
    display:inline-block;
    font-size: 30px;
}
.navbar-menu {
    float:right;
}
.navbar-option {
    display:inline-block;
    font-size:25px;
    padding:20px;
    padding-left:30px;
    padding-right:30px;
}
.navbar-checked {
    background-color: rgb(0, 217, 63);
}

Answer 1

Put the element with that has "float: right" before the rest of the elements on that line.

Basically, move <div class="navbar-menu">...</div> before <img src="logo.png" ...>. Or, in the sample code of the edited question, move <div class="navbar-menu">...</div> before <div class="navbar-title">...</div>.

I am not sure regarding the technical justification to this, but floats are better put before the non floats. Perhaps this is because it assumes there is no room for the floating element.

Answer 2

Try elements on the left side wrapping with another div. Like this for example:

<div class="navbar-header">
    <div class="another-div">
        <img src="logo.png" alt="logo.png" class="navbar-logo" width="47" height="47">
        <div class="navbar-title">
           <a href="#">tick<span class="bookfont">talk</span></a>
        </div>
        <div class="navbar-subtitle">
            social networking around the clock
        </div>
    </div>
    <div class="navbar-menu">
        <div class="navbar-option login-button">
            Login
        </div>
        <div class="navbar-option navbar-checked signup-button">
            Sign Up
        </div>
    </div>
</div>

Then give that .another-div CSS property float:left, and don't forget to set a hight for the .navbar-header after this.

.another-div{
    float: left;
}
.navbar-header{
    height: 80px;
}

This should work.