How can I get my elements to align properly? - html

Question

I need help with css in my angular app.
Here's my plunker:
https://plnkr.co/edit/5GvpLHcGq93yfpqHAJwy?p=preview
But here's the main code snippets as well:
import {Component} from '#angular/core'
#Component({
selector: 'app-child-component',
template: `<div class="header">
<div style="text-align:left;">
<div class="headerText"> Foo
<div style="float:right;">
<span class="headerText">Language</span>
<span>
<select style="margin-right:10px;margin-top:4px;">
<option *ngFor="let language of languages">{{language}}</option>
</select>
</span>
</div>
</div>
<div class="headerText"> Bar
<div style="text-align:-webkit-right; padding-right:10px;">
<span class="headerText">
user: admin
</span>
</div>
</div>
</div>
<div style="float:right;">
<div>
<button class="signOutButton">Sign Out</button>
</div>
</div>
</div>
`,
styles: [`.signOutButton {
background:#5dacb4 !important;
width:100px;
height:30px;
font-size:14px;
margin:5px;
float:right;
}
.header {
background:#3f3f3f;
}
.headerText {
color:#ffffff;
font-size:16px;
margin-bottom:0px;
margin-left:10px;
}`]
})
export class ChildComponent {}
The issue I'm having is I need user:admin to be on the same line as Bar
and the sign out button to align all the way right after the language and user and vertically aligned centered on the right.
How can I achieve that?

Answer 1

Something a bit like this?
.signOutButton {
background:#5dacb4 !important;
width:100px;
height:30px;
font-size:14px;
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
}
.header {
background:#3f3f3f;
color:#ffffff;
font-size:16px;
position:relative;
padding:10px;
}
.left {
float:left;
}
.right {
float:right;
}
.line {
width:calc(100% - 110px);
}
.line::after { /* CLEARFIX */
content: "";
clear: both;
display: table;
}
<div class="header">
<div class="line">
<div class="left">
Foo
</div>
<div class="right">
<select>
<option>English</option>
</select>
</div>
</div>
<div class="line">
<div class="left">
Bar
</div>
<div class="right">
user:admin
</div>
</div>
<button class="signOutButton">Sign Out</button>
</div>
Explaination
Essentially, with a design like this, the approach that I took was to break it up into two parts: the two "Foo" / "Bar" lines, and the Sign Out button.
Each line needed to have something aligned to it's left, and something aligned to it's right. A normal line of text can't do this, but it is the perfect scenario in which to use float!
Unfortunately, floating elements don't take up any space, and since these lines are entirely comprised of floating elements, this means that they themselves don't take up any space. Thankfully, this problem was solved long ago, with a solution commonly known as the clearfix hack. This is what we use here.
For the Sign Out button, a little absolute positioning is all that we need to pop it in the right place (remember that absolute positioned elements inside elements positioned with relative or absolute will be positioned relative to that element, not the entire page). However, the lines will overlap with the button. Not good.
Therefore, we simply need to make the lines slightly shorter. How much shorter? I'd say 110px, as the button is 100px and it'll look nicer if we leave 10px of space between the end of the lines and the button, rather than having them pushed up against each other. We can use calc() to make these lines exactly 110px shorter, by simply having this value subtracted off of 100%.