We Keep Coding

Move relative object position when scrollbar appears using CSS

On my page, I'm displaying a log file in a div element with overflow-y:auto. In the top right corner of the div, I'm overlaying a close button div with position:relative.
When the scrollbar appears, the button is overlaying the scrollbar which is hard to see and looks ugly. You can see an example here: https://jsfiddle.net/4azw0rLf/
Moving it with javascript when scrollHeight exceeds clientHeight feels like a hack. Is there an option in CSS to move the close button to the left for the width of the scrollbar as soon as it appears?

You can wrap your terminal and move your close button inside. I created a minimal example starting from your code.
EDIT
With the first answer the close button scrolled along with the text, I corrected using the position: sticky; and top:0px;
It is not compatible with all browsers, but with most, you can check compatibility here.
const terminal = document.getElementById("terminal");
addText = () => {
terminal.innerHTML += "overflowing line<br>";
}
#container-terminal {
position: relative;
overflow-y: auto;
border: 2px solid;
height: 100px;
width: 200px;
}
#terminal {
position: absolute;
height: 100%;
width: 100%;
}
#closeBtn {
background-color: red;
position: -webkit-sticky;
position: sticky;
top:0px;
width: 20px;
display: inline-block;
float: right;
}
<div onclick="addText()" style="cursor:pointer;">Click to add text</div><br>
<div id="container-terminal">
<div id="terminal">CSS only<br>CSS only<br>CSS only<br>CSS only<br>CSS only<br></div>
<div id="closeBtn">X</div>
</div>

Perfectly center images in react column

I'm having difficulty aligning some images inside of bootstrap 4 columns. I have tried using the CSS property text-align: center, and this will center the image horizontal. My columns take up a large amount of the view port though, so I also need the images to be centered vertical.
Here is what my react component is returning. class="img13" is what i am attempting to center.
<div id="border">
<div class="container">
<div class="row tower">
<div class="col-sm-3 towers" id="tower1">
<div class="tower-icon"><img class="img13" src={character}></img></div>
</div>
</div>
</div>
</div>
Here is the CSS that I currently have. It hard codes an image to be centered in one column, but if i change the display size for the site, or use a different image, it is no longer centered.
.row{
display: flex;}
.towers {
color: white;
height: 100%;
position: relative;
}
.tower-icon{
margin-top: 52%;
margin-bottom: 48%;
}
.img13{
height: auto;
width: 100%;
}
Start Menu here is an attached picture of what the component looks like. The background is the column, and the 'start' picture is the class="img13"

You can take advantage of flexbox and auto center align everything within the .tower-icon div like so:
.tower-icon {
display: flex;
align-items: center;
justify-content: center;
}
Just please note that the logo will horizontally and vertically center within the constraints of the column with the .col-sm-3 class.
Test link:
https://jsbin.com/sekosibizo/edit?css,output

Set the div containing the image to be the height of the viewport, then set its display property to flex. Then give the image a margin: auto.
.tower-icon {
height: 100vh;
display: flex;
}
.img13 {
margin: auto;
height: auto;
width: 100%;
}

CSS: Performance wise, better to use calc or position absolute

I have a container div with fixed height. Inside two divs, the top height: 50px and the other one must fill the empty space but allowing internal scroll.
Now I have two options:
#up{
height: 50px;
}
#down{
position: absolute;
top: 50px;
bottom: 0;
}
or:
#up{
height: 50px;
}
#down{
height: calc(100% - 50px);
}
If I have many of these cases inside my window, which one is the best to use performance wise?
This Fiddle
ps. I don't care about old browser support.

I would always work with calc option. Both could look the same but they are not.
When you use position:absolute You are taking the container #down out of the html flow.
This means that if anytime you are going to add more stuff to your project, You will have many problems positioning them.
As an example, if you want to add another container below #down (a footer maybe), in your first option it will be placed overlapping #down container right below your header. In the second option it will be placed where you want it.

One way to fill the space would be to use flexbox.
.container {
display: flex;
flex-direction: column;
height: 200px;
}
#up {
background: yellow;
flex: 0 0 50px;
}
#down {
background: orange;
flex: 1 1 auto;
}
<div class="container">
<div id="up">
up
</div>
<div id="down">
down
</div>
</div>

How to use an image as a frame, and scroll inside? Simulating a phone on a website

I'm not sure what this is called, but how do developers accomplish being able to have, say a hollow image of a Nexus phone, and then scroll content inside of it? It's an ingenious way to simulate how a product will work in real life, so how does one pull this off?
Here's an example, about halfway down the page.
http://grupoweb.upf.edu/innova/q_kly/#step-6
#silversunhunter
I am able to get both images displayed, but the content seems to be completely obscuring the parent div. I measured the images and the dimensions are correct afaik.
css:
.nexus5-frame {
background: url(img/nexus5frame.png);
height:640px;
width:326px;
position: relative;
}
.nexus5-content {
overflow: scroll;
height: 515px;
width: 292px;
position: absolute;
left: 26px;
top 597px;
}
HTML:
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<div id="nexus5-frame">
<div id="nexus5-content">
<img src="img/content.png"/>
</div>
</div>
</div>

You need to set the image as a background image in the parent div. Then a properly measured div inside that is absolutely positioned can be your scrollable content.
<div id="main">
<div id="content"></div>
</div>
the phone image is 345px × 661px
#main {
background: url(/filelocation) no-repeat;
height: 661px;
width: 345px;
position: relative;
}
the screen is 305x601 (hypothetically)
#content {
overflow: auto; /*this gives us our scroll bar when the content is longer than the div*/
height: 601px;
width: 305px;
position: absolute;
left: 20px;
top: 30px;
}

Fixed positioning overlap issue

I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link

Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}