CODEWITHSUNDEEP
htmlcssasp.net
Anona
Anona

Reputation: 253

Can't seem to get the Text and a Dropdown Aligned...?

Can't align a

and a asp Dropdownlist, see below for HTML and CSS, they keep going underneath each other... I've tried alot and have failed every single time..

How it is and How it should be: http://prntscr.com/7bzo0f

HTML :

<div id="header">
        <img id="logo" src="../Images/top2000.gif" />
        <div>
            <p id="teamNames">Tom, Rutger & Mike</p>
        </div>
        <asp:DropDownList ID="ddlJaar" CssClass="ddl" runat="server">
            <asp:ListItem Text="2014"></asp:ListItem>
            <asp:ListItem Text="2013"></asp:ListItem>
            <asp:ListItem Text="2012"></asp:ListItem>
        </asp:DropDownList>
    </div>

CSS :

 #header{
background-color: rgb(222,54,54);
width:100%;
height: 70px;
position:absolute;
}

#logo {
height: 50px;
margin-right: 50px;
margin-top: 8px;
}

.ddl {
background: #fff none repeat scroll 0 0;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
outline: medium none;
padding: 8px 15px;
position: relative;
transition: all 0.3s ease-out 0s;
width: 200px;
font-weight: 400;
float:right;
margin-top: 15px;
margin-right:20px;
}

#teamNames {
font-family: HelveticaNeue-Light;
font-size: 20px;
margin:0;
padding:0;
}

Upvotes: 0

Views: 41

Answers (1)

Jeroen
Jeroen

Reputation: 175

Reverse the order for the item in the header (dropdown, div, img) and add "float: right;" for the div. Add some padding to fix the horizontal alignment.

div {     
    float: right; margin-top: 10px; margin-right: 10px;
}

See http://jsfiddle.net/8e3hhdxa/

Upvotes: 1

Related Questions