对齐 <div> 父母的右下角 <div> ？

Question

I have a couple groups of links at the top of a layout page for an MVC app, and I'm having trouble getting these links positioned properly.

Here's what they SHOULD look like (I'm making some huge changes to this site, but keeping the layout intact):

Keep in mind that this photo is at the center-right of my page, that is to say, the page extends further to the right, but there's no content in that area.

After altering these image-based links to text-based, they lose their styling integrity and scramble.

Here's some code from my current links to give an idea of how they're contained:

<div class="top-links">
    <div id="top-nav">
        <a class="top-link" href="#" title="My Profile">
            <span>MY PROFILE</span>
        </a>
        <a class="top-link" href="#" title="Account Profile">
            <span>ACCOUNT PROFILE</span>
        </a>
        <a class="top-link" href="#" title="Sign Out">
            <span>SIGN OUT</span>
        </a>
    </div>
</div>
<div class="links">
    <div id="nav">
        <a class="home-link home-link-left" href="#" title="My Component Books">
            <span>MY COMPONENT BOOKS</span>
        </a>
        <a class="home-link" href="#" title="New Component Book">
            <span>NEW COMPONENT BOOK</span>
        </a>
        <a class="home-link" href="#" title="System Logs">
            <span>SYSTEM LOGS</span>
        </a>
    </div>
</div>

I left out pieces of the tags themselves for readability.

And finally, the relevant CSS:

/*----------- TOP NAVIGATION -----------*/
.top-links {
    float: right;
    height: 31px;
    margin: 0 0 0 0;
    width: auto
}

.top-link {
    font: 7pt Georgia, serif;
    color: #E1915C;
    text-align:center;
    text-decoration: none;
    line-height: 34px;
    padding: 10px;
}

#top-nav {
    float: right;
    margin: 0 0 0 0;
    overflow: hidden;
}

/*----------- NAVIGATION -----------*/
.links {
    float: right;
    width: auto;
    height: 36px;
    overflow: hidden;
    bottom: 0;
    right: 0;
}

.home-link {
    font: 7.25pt Georgia, serif;
    color: #E1915C;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #E1E1E1;
    text-align: center;
    line-height: 36px;
    width: auto;
    padding: 10px;
}

    .home-link:hover {
        color: #369AAA;
    }

.home-link-left {
    border-left: 1px solid #E1E1E1;
}

.home-link-right {
    border-right: 1px solid #E1E1E1;
}

#nav {
    position: absolute;
    float: right;
    overflow: hidden;
}

Sorry if it seems like a bit much, some of it isn't my original code and I'm not sure what I should/shouldn't include.

I'm not the best with CSS, so could any styling gurus give me some insight on how I can make the links lay out as they are in the screenshot?

Answer 1

See if this is what you were going for: http://jsfiddle.net/derekstory/cHnXx/

/*----------- TOP NAVIGATION -----------*/

.top-links {
    height: 31px;
    margin: 0 0 0 0;
    width: auto;

}
.top-link {
    font: 7pt Georgia, serif;
    color: #E1915C;
    text-align:center;
    text-decoration: none;
    line-height: 34px;
    padding: 10px;
}
#top-nav {
    float: right;
    margin: 0 0 0 0;
    overflow: hidden;
}
/*----------- NAVIGATION -----------*/
 .links {
    whitespace: nowrap;
    min-width:  120px;
    float: right;   
    height: 36px;
}
.home-link {
    font: 7.25pt Georgia, serif;
    color: #E1915C;
    text-decoration: none;
    font-weight: bold;
    border-right: 1px solid #E1E1E1;
    text-align: center;
    line-height: 36px;
    width: auto;
    padding: 10px;
}
.home-link:hover {
    color: #369AAA;
}
.home-link-left {
    border-left: 1px solid #E1E1E1;
}
.home-link-right {
    border-right: 1px solid #E1E1E1;
}
#nav {
    position: absolute;
    float: right;
    overflow: hidden;
}

Answer 2

Here is the jsFiddle: http://jsfiddle.net/FVjhQ/2/

CSS

#profile-nav {
     margin-bottom: 25px;
}
.nav-container,
.nav-container li {
     margin: 0;
     padding: 0;
}
.nav-container {
     clear: right;
     float: right;
}
.nav-container li {
     border-left: 1px solid #E1E1E1;
     float: left;
     list-style: none;
     line-height: 36px;
}
.nav-container a {
     font: 7.25pt Georgia, serif;
     color: #E1915C;
     text-decoration: none;
     font-weight: bold;
     padding: 10px;
     text-transform: uppercase;
}
.nav-container a:hover {
     color: #369AAA;
}
.nav-container .last-link {
     border-right: 1px solid #E1E1E1;
}
.no-border li {
     border: 0;
}

HTML

<ul id="profile-nav" class="nav-container no-border">
    <li>
        <a href="#" title="My Profile">My Profile</a>
    </li>
    <li>
        <a href="#" title="Account Profile">Account Profile</a>
    </li>
    <li>
        <a href="#" title="Sign Out">Sign Out</a>
    </li>
</ul>

<ul id="component-nav" class="nav-container">
    <li>
        <a href="#" title="My Component Books">My Component Books</a>
    </li>
    <li>
        <a href="#" title="New Component Books">New Component Books</a>
    </li>
    <li>
        <a href="#" title="Notifications">Notifications</a>
    </li>
    <li class="last-link">
        <a href="#" title="System Logs">System Logs</a>
    </li>
</ul>