troubleshooting Question

alignment of UL and Image button in same div

Avatar of gogetsome
gogetsomeFlag for United States of America asked on
CSS
3 Comments1 Solution732 ViewsLast Modified:
Hello, Need some help with this CSS. In the banner div I want the image button aligned to the left then I want the ul aligned to the right. All on the same line if that make sense.
Curently the image button is aligned on the left then the menu (ul) starts under the image button. How can I get my desired results?

Here is my code:

<div id="content">
    <div id="banner">
        <asp:ImageButton ID="ibtnBannerHome" ImageUrl="~/App_Themes/Default/Graphics/Banner.jpg" runat="server" />
          <ul>
            <li class="active"><a href="Default.aspx" accesskey="1" title="">Home</a></li>
            <li><a href="Services.aspx" accesskey="2" title="">Services</a></li>
            <li><a href="Products.aspx" accesskey="3" title="">Products</a></li>
            <li><a href="Contact.aspx" accesskey="4" title="">Contact</a></li>
            <li><a href="News.aspx" accesskey="5" title="">News</a></li>
        </ul>
    </div>
</asp:Content>


CSS:

#banner {
      width: 760px;
      height: 55px;
      margin: 0 auto;
      padding: 0px;
}

#banner ul {
      margin: 0;
      padding: 0;
      list-style: none;
}

#banner li {
      display: inline;
}

#banner a {
      display: block;
      float: left;
      width: 100px;
      height: 25px;
      padding: 5px 1px 0 1px;
      background: url(Graphics/NavBtnDwn.jpg) no-repeat center top;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 1em;
      font-weight: bold;
      color:#e0e0e0;
}

#banner a:hover, #banner .active a {
      background-image: url(Graphics/NavBtnUp.jpg);
      color: #FFFFFF;
}

#content {
      width: 760px;
      margin: 0 auto;
      background: #f3bb34;
}
body {
      margin: 20px 0;
      background: #000000 url(Graphics/Background.jpg);
      text-align: left;
      font: normal small Verdana, Georgia, "Times New Roman", Times, serif;
      color: #ffffff;
}
ASKER CERTIFIED SOLUTION
GoofyDawg

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 3 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros