1

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.

6
  • 2
    Please provide a working jsfiddle with all CSS affecting the image and tags
    – Oriol
    Oct 2, 2013 at 17:44
  • @Oriol here is the jsfiddle jsfiddle.net/86Pr2
    – oJM86o
    Oct 2, 2013 at 17:51
  • See this updated fiddle: jsfiddle.net/86Pr2/1
    – Imran Omer
    Oct 2, 2013 at 17:53
  • Notice the tabs are at the top, I want to move them to the bottom edge right before the content of the div.
    – oJM86o
    Oct 2, 2013 at 17:54
  • @ImranOmer this is not right, your tabs are at the bottom of the page. I want the tabs to appear before the gray section at the top right.
    – oJM86o
    Oct 2, 2013 at 17:54

2 Answers 2

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>
1
  • Wahoo! Glad to be of help. :)
    – codedude
    Oct 2, 2013 at 18:16
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.