How do I create a right aligned logout button? - html

Question

My top div acts as a logo and has a title. I would like a logout button to be on the right-hand side of the div and text above also right-aligned.
I left out the button/ link as i did not know where to place it.
I'm looking for something like this:
My goal is a logo and, on the right, the logout button with text on the top.
How can I achieve that?
.logo {
overflow: hidden;
text-align: left;
position: relative;
margin: 0px 100px;
height: 60px;
background-color: pink;
color: blue;
font-family: Arial;
}
<div class="logo">
<h1>LOGO</h1>
</div>

Answer 1

You can use flexbox here. Try this out:
.wrap {
display: flex;
justify-content: space-between;
}
.logo {
overflow: hidden;
text-align: left;
position: relative;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
<div class='wrap'>
<div class="logo">
<h1>LOGO</h1>
</div>
<div>
<p>abcdefg</p>
<button>Click It</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/dm198kpx/2/

Answer 2

There are various ways to achieve what you want. I believe the simplest one is with Flexbox:
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
<div class="flex justify-between">
LOGO
<div>
BLABLABLA<br>
<button>Logout</button>
</div>
</div>
Here, flex is a display property that is usually used in container-type elements (like div). It helps to align content. It allows the use of various other properties like justify-content, align-items* and others. In this case, we are using only justify-content, which align direct children on the main axis (the horizontal one by default), with the space-between value, which distributes the content as far as possible - and since we have only two direct children of <div class="flex justify-between">, LOGO and <div>, put the first on the far left and the last on the far right.
*: you can learn more about Flexbox properties and use cases in this game: https://flexboxfroggy.com/

Answer 3

I've added the button to what I think is your header? I used the native header tag, but if it isn't your header, you can always replace this with a div with a unique id of your choice. I included position:fixed; in the css, otherwise the button wouldn't stay to the right (you could use float, but it can be problematic imho). Height/colour etc are adjustable of course.
Hope this helps
h1.logo {
display: inline-block;
position: relative;
text-align: left;
margin: 10px 100px;
height: 60px;
background-color: white;
color: #1F6C8B;
font-family: Arial;
}
#logout {
background-color: lightblue;
height: 30px;
text-align: right;
right: 40px;
position: fixed;
}
.logo,
#logout {
vertical-align: top;
}
<header>
<h1 class="logo">LOGO</h1>
<button id="logout">Logout</button>
</header>
EDIT: Just saw the text-above edit to your question. See fiddle