Question

I have a div with a few objects in it. I have items on both the left and right sides. The left side seems to be fine. The right side I have two objects I need aligned to the top right. When I get mybelmont-icon.png too close to it starts to stretch the menu vertically. Any ideas on how I could fix this?

<div id="outer">
    <div id="inner">
        <img src="images/belmont-logo.png" align="left">
        <img src="images/dot-divider.png" align="left">
        <img src="images/prospective-students.png" align="left">
        <div class="quicklinks" align="right">
            <div style="margin-left:500px; float:left;"><img src="images/mybelmont-icon.png"></div>
            <ul class="menu">
                <li class="menu-item">
                    <b>Quick Links >></b>
                    <ul class="sub-menu clearfix">
                        <li class="menu-item">
                            <b><u>Heading 1</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 2</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 3</u></b>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Academics</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Admissions</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Financial Aid</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> President's Message</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Why Belmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Board of Trustees</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Giving</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> MyBelmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Apply Now</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Majors & Programs</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Facebook</a>
                        </li>
                        <li class="menu-item">
                            <a href="#"> Twitter</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>      
    </div>
</div>

CSS:

body{
    background-color: #ccc;
    height:100%;
    margin:0px;
}

.clearfix:before, .clearfix:after {
    content: " "; 
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.quicklinks a{
    color: #ffffff;
    text-decoration:none;
}

.quicklinks a:visted{
    color: #ffffff;
    text-decoration:none;
}

.quicklinks a:hover{
    color: #ffffff;
    text-decoration:none;
}

.quicklinks a:active{
    color: #ffffff;
    text-decoration:none;
}

.menu {
    background: #f36f21;
    margin: 0;
    list-style-type: none;
    padding: 5px 15px 5px 15px;
    position: relative;
    width: 110px;
}

.menu .menu-item:hover .sub-menu {
    display: block;
}

.sub-menu {
    background: #f36f21;
    display: none;
    margin: 0; 
    padding: 10px;
    position: absolute;
    right: 0;
    width: 400px;
    text-align: left;
}

.sub-menu .menu-item {
    display: inline;
    float: left;
    padding: 0 10px 0 10px;
    width: 100px;
}

.quicklinks{
    margin: 0;
    padding: 0;
}   

#outer{
    background-color:#003366;
    height:120px;
}

#orangebar{
    background-color:#f36f21;
    height:5px;
}

#inner{
    width:1024px;
    height:auto;
    color: #ffffff;
    background-color:#003366; 
    margin:0px auto 0 auto; 
}

And here’s a live preview.

I figured it out. You can accomplish the task by assigning the objects to float: right. Works great. Thanks for looking at it guys.

<div id="outer">
    <div id="inner">
        <img src="images/belmont-logo.png" align="left">
        <img src="images/dot-divider.png" align="left">
        <img src="images/prospective-students.png" align="left">
        <div class="quicklinks">
            <ul class="menu">
                <li class="menu-item">
                    <b>Quick Links >></b>
                    <ul class="sub-menu clearfix">
                        <li class="menu-item">
                            <b><u>Heading 1</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 2</u></b>
                        </li>
                        <li class="menu-item">
                            <b><u>Heading 3</u></b>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Academics</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Admissions</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Financial Aid</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> President's Message</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Why Belmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Board of Trustees</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Giving</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> MyBelmont</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Apply Now</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Majors & Programs</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Facebook</a>
                        </li>
                        <li class="menu-item">
                            <a href="#">> Twitter</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <img style="float: right;" src="images/mybelmont-icon.png">     
    </div>
</div>

.quicklinks{
    float: right;
    color: #ffffff;
    text-decoration:none;
}

.quicklinks a{
    color: #ffffff;
    text-decoration:none;
    float: right;
}

.quicklinks a:visted{
    color: #ffffff;
    text-decoration:none;
    float: right;
}

.quicklinks a:hover{
    color: #ffffff;
    text-decoration:none;
    float: right;
}

.quicklinks a:active{
    color: #ffffff;
    text-decoration:none;
    float: right;
}

Answer 1

Simple answer should be just to float the elements required right

.element{
    float: right;
}