Question

 CSS:
 #header_bar
{
background-repeat: repeat-x;
width:100%;
}

.langpnl
{
float:right;
padding-top: 2px;
padding-right: 0px;
position:relative;
width:45px; 
height:16px; 
font-size:7pt;
}

#imgLogo
{
width: 156px; 
height: 42px;
}

<!-- header.ascx -->
<div id="header_bar">
<div align="center">
    <a href="<%=AppPath%>" target="_parent" >
        <img id="imgLogo" runat="server" src="~/images/UI/logo.jpg"   border="0" /></a>
       <asp:DropDownList ID="ddlLanguage"  class="langpnl" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged">
        <asp:ListItem Value="">EN</asp:ListItem>
        <asp:ListItem Value="es-ES">ES</asp:ListItem>
    </asp:DropDownList>
  </div>
 </div>
 <!-- /header.ascx -->

I am trying to align image in the center and dropdown box to the right top corner. Currently I am able to do it but the Image is slighty to the left. If I remove the dropdown box only then it gets in the center.
In the system browsers you cannot figure it out but this is a mobile website & in mobile view you can figure out the difference.

Answer 1

Here’s one way to achieve what you’re looking for:

http://jsfiddle.net/NzZak/