CODEWITHSUNDEEP
htmlcss
oJM86o
oJM86o

Reputation: 2118

right floated div...align to bottom?

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... enter image description here

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.

Upvotes: 1

Views: 521

Answers (2)

Dan Cameron
Dan Cameron

Reputation: 756

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;
}

Upvotes: 0

codedude
codedude

Reputation: 6519

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>

Upvotes: 1

Related Questions