cableload
cableload

Reputation: 4375

aligning two elements on the same line

I have a asp.net webpage where I am trying to align two elements to be on the same line for visual purposes. First element is a span element with title of the page. Towards the far right of the same line I want to display a logout link (the element used for link is asp:linkbutton which calls a logout method on the page behind method) This causes the logout link to move to the next line (far right). How do I adjust the css or html to do what I want.

What I see now is

                Page Title
                                                                             Logout

what I want is

                Page Title                                                   Logout

Upvotes: 0

Views: 2164

Answers (2)

IrishChieftain
IrishChieftain

Reputation: 15253

Markup:

<div id="title">
    Page Title
</div>
<div id="logout">
    Logout
</div>

CSS:

#title{
width: 200px;
float: left;
}

#logout{
width: 200px;
float: left;
}

http://jsfiddle.net/s9tFY/

Adjust widths and style as wished.

Upvotes: 2

isherwood
isherwood

Reputation: 61056

http://jsfiddle.net/9wY5m/2/

.logoutlink {float: right;}
#Label1 {float: left;}

Note that I've removed the large margins on .logoutlink.

Upvotes: 2

Related Questions