右浮动div…与底部对齐？

Question

I've got html like so:

<div class="content-wrapper">
            <div class="float-left">
                <img alt="Track System" src="Images/myimage.png" />
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li class="tab"><a runat="server" href="~/">Home</a></li>
                        <li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
                        <li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
                        <li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
                    </ul>
                </nav>
            </div>
        </div>

The first div (The one float-left) is just an image that has some length to it... The second div (the float-right) are tabs that I want to align on the bottom. Right now they are too high up...

the css classes simply are:

.float-left{
float:left;
}

.float-right{
float:right;
}

I tried changing to absolute and relative positioning but it did not help...

Here's what it looks like with the logo correctly being displayed on the left but the tabs on the right floating...I'd like to get those aligned to the bottom.

Answer 1

Is this what you want? http://jsfiddle.net/86Pr2/4/

I added a div with a class of "clear" and the following CSS: (I added !important to all of them cause I didn't feel like looking through all your code.)

.float-right {
position:absolute !important;
bottom:0 !important;
right:0 !important;
}
.content-wrapper {
   position:Relative !important;
}
.clear {
    clear:both !important;
}

And the changed HTML:

<div class="content-wrapper">
        <div class="float-left">
            <img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
        </div>
        <div class="float-right">
            <nav>
                <ul id="menu">
                    <li class="tab"><a runat="server" href="~/">Home</a></li>
                    <li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
                    <li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
                    <li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
                </ul>
            </nav>
        </div>    
<div class="clear"><!--This makes the wrapper have a height--></div>

    </div>
    <div id="body">
    <section class="content-wrapper main-content clear-fix">
        hi
        </section>
    </div>

Answer 2

Not that @codedude didn't create something that would work but you wouldn't ever want to use the !important tag in your CSS.

Here's what I was working on: http://jsfiddle.net/dancameron/86Pr2/7/

It doesn't require any additional markup either (an empty div to clear!) and cleans up the class names to be more semantic.

HTML:

 <div class="content-wrapper clear-fix">
        <div class="float-left">
            <img alt="Track System" src="http://i.imgur.com/2M3DyCv.png" />
        </div>
        <div class="nav-wrap">
            <nav>
                <ul id="menu">
                    <li class="tab"><a runat="server" href="~/">Home</a></li>
                    <li class="tab"><a runat="server" href="11Models2.aspx">Models</a></li>
                    <li class="tab"><a runat="server" href="Lease.aspx">Lease </a></li>
                    <li class="tab"><a runat="server" href="Help.aspx">Help</a></li>
                </ul>
            </nav>
        </div>
    </div>

    <div id="body">
        <section class="content-wrapper main-content clear-fix">
            hi
        </section>
    </div>

CSS:

.content-wrapper {
    margin: 0 auto;
    max-width: 100%;
    position: relative;
}
.nav-wrap nav {
    position: absolute;
    bottom: 5px;
    right: 5px;
}