Develop Reference

An expandable div?

I want to create a div where one of the children is visible and one is out of the div, I've been using overflow:hidden for this, however whatever i try i can't seem to get this to work, I've tried positioning one absolute and that works, but as soon as I extend the div to reveal the extention it will overlap it obviously. Any help would be great, here are some pictures of the main concept.
Before Being Clicked
After Being Clicked
note: I am using react js to develop this, if you could make a codepen or something in vanilla javscript just as a concept of the main functionality and then I will convert it to react.
Thanks in advance :)

Here is one way:
.expandable {
position: relative;
}
.expandable>div {
width: 200px;
transition: all 1s;
overflow: hidden;
background-image: url('https://via.placeholder.com/200');
background-repeat: no-repeat;
min-height: 200px;
border: 1px solid black;
}
.expandable>div>img {
position: absolute;
width: 200px;
}
.expandable>input { display: none; }
.expandable>label {
position: absolute;
top: 90px;
left: 210px;
transition: all 1s;
background-image: url('https://img.icons8.com/flat_round/64/000000/arrow--v1.png');
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
transform: rotate(0deg);
}
.expandable>input:checked+label {
left: 410px;
transform: rotate(180deg);
}
.expandable>input:checked~div {
width: 400px;
}
.expandable>div>div {
width: 200px;
padding-left: 200px;
}
<div class="expandable">
<input type=checkbox id='ex1'>
<label for='ex1'></label>
<div>
<div>
<!-- right side content -->
<h1>Stuff here</h1>
<p>lorem ipsum</p>
</div>
</div>
</div>
This uses the label as the button. When clicked, it triggers the input to be checked/unchecked. We then use the status of the checkbox to change our CSS, and we use transitions so that it is smooth, works across all modern browsers, and is very battery efficient for mobile devices.

Scrolling fixed header displays farther down then desired

I am having some difficulties with a scrolling fixed header I am creating. I found a good example of it on here and now I am trying to make it work with my changes to it and I am trying to adapt it.
I put additional divs than what were in the example and now whenever I scroll past the yellow bar, the red bar(my header) displays way lower than I want.
I created a fiddle to show what it is doing.
https://jsfiddle.net/zoue6gv7/
This worked until I added my top margin to my div id join_login. It now is that far away from the top.
#join_login {
position: absolute;
right: 15%;
top: 27px;
font-size: 1em;
color: #383838;
}
How can I get this header to stay fixed at the top after I get to my scroll point?

Is this what you want? https://jsfiddle.net/zoue6gv7/1/
I just removed the margin-top -50px and replaced it with
top: 0;

This should do the trick! You can just eliminate the space above #logo by adding margin-top: -15px
#logo {
position: absolute;
left: 15%;
top: 22px;
font-size: 2em;
margin-top: -15px;
}

Just kidding! I think I misunderstood what you're trying to do, if you want the red Header to stick to the top of the page even when you scroll down:
Use position: fixed; to tell the header to stay in the same location regardless of scrolling
Use top: 0px; to tell the header, that the location you'd like it to be fixed to is the very top of the page
header {
position: fixed;
top: 0px;
width: 100%;
height: 75px;
background: red;
z-index: 100;
border-bottom: 1px solid #888888;
}

How do I keep images in place as the browser is resized?

Hello on my page i have 2 character images, that i have placed on both sides of a text and banner, heres a picture of it http://i.imgur.com/KwzphQP.jpg but heres the problem, when i rezise my browser the images follows with the browser, they do not stay in the same position, and i dont want this to happen because i have a fixed layout, heres the css code, i dont know how to post it good, but anyway
.support-text {
width: 600px;
margin-left: auto;
margin-right: auto;
line-height: -2px;
margin-bottom: 130px;
}
.support-text h1 {
font-size: 30px;
}
.support-text {
clear: left;
}
.support-text {
font-size: 23px;
}
.support-img {
margin-top: -80px;
margin-bottom: 80px;
z-index: 1;
}
.ct-pic {
position: absolute;
right: 10px;
bottom: 30px;
float: right;
}
.ct-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic:hover {
-webkit-filter: brightness(180%);
}
.t-pic {
position: absolute;
left: 40px;
bottom: 30px;
float: left;
}
heres the html
<section class="support-text">
<div class="ct-pic"> </div>
<div class="t-pic" width="867" height="569"></div>
<img src="img/support-us.png" class="support-img">
<p>Hello, if this site has helped you improve your gameplay, and learn useful stuff, feel free to support us, so we can keep this website up, so more people can learn. You can support through Steam or throught paypal. Keep in mind that you do not have to support, but if you do, we appreciate it alot. and we can continue to upload new content (Smokes, flashes, tactics) to the website. </p>
</section>

heres an example of how to position things next to each other without them moving away or changing positions when you resize the window (the divs can be img tags or whatever you want them to be). Just put them in a "container" with a fixed width, and then float them inside that container
<div id='container'>
<div id='image-1' class='image'></div>
<div id='image-2' class='image'></div>
<div id='image-3' class='image'></div>
</div>
#container {
width: 200px;
height: 100px;
background: black;
}
.image {
background: white;
width: 20px;
height: 20px;
float: left;
margin: 20px;
}
http://jsfiddle.net/7qytj718/1/
update
you have an issue with your css. You're setting child elements' positions to absolute, this makes them ignore their parent element and become positioned relative to the entire window. When this happens, the child elements start moving when the window is resized.

DIV-Elemt absolute(!) positioning

First for all: No, I'm not looking for the property position: absolute;
What I want to is to create a field that displays some text. I want to display that field exactly in the middle of the page and then fade out the background, doesnt matter, where the div is placed in the code.
At the moment it looks like that:
https://www.dropbox.com/s/wiljdh1xjj3we1c/Capture1.PNG
https://www.dropbox.com/s/chw7pdes5fdcj3u/Capture2.PNG
How can I place an Elemtn ABSOLUTE in the middle of the page, doesnt matter where it is written in the code?
Now I could just say well, I will place it on top of the content. But the problem is, in this field is displayed some information that generates in the content, so I have to put it in the code after the content.
I hope, someone can help me :)
PS: If you have another solution to solve something like this... feel welcome to tell me! I just want something like an alert();-Box with my own style.
EDIT: Some effort: (basically already shown with the screenshots, but here some code; just didnt want to make it confusing)
I save the text as following:
// Save Help-Text
ob_start();
?>
This is the main page. There is no help available!
<?php
$help = ob_get_clean();
I display the text as following: (echo create_help($help); creates the help-tag and displays it)
function create_help($content){
$help = "
<div id=\"help-bg\" class=\"closehelp\" ></div>
<div id=\"help\" >
<img src=\"../images/close.png\" class=\"closehelp\" />
$content
</div>
";
return $help;
}
This is the CSS for the box:
/* Help-box style */
#help
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
background-color: #B8DBFF;
border: 5px solid rgb(58, 100, 250);
border-top: 30px solid rgb(58, 100, 250);
border-radius: 5px;
padding: 20px;
width: 600px;
z-index: 1001;
#help img
position: absolute;
margin-left: 595px;
margin-top: -47px;
height: 25px;
width: 25px;
/* Makes background of Help-box transparent black */
#help-bg
background-color: black;
z-index: 1000;
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
opacity:0.6;
display: none;

First of all I would recommend using position:fixed; instead of position:absolute; because the alert would scroll within the page. If you have a fixed height and width try something like
margin: -150px 0 0 -150px;
left: 50%;
top: 50%;. This CSS-Code will center your div horizontally and vertically (Demo -> http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html). But if you are using an dynamic height maybe you should consider using jQuery or give it a fixed top position.

try this:
html, body{
position: relative;
}
.yourAbsoluteClass{
position: absolute;
width: 50%;
top: 25%;
left: 50%;
}

Can not change Fancybox close button

I want replace default close button in Fancybox 1.3.4 with custom one.
I've changed CSS as follows, but button not showing.
#fancybox_close {
width: 66px;
height: 22px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
background: url('../js/jquery/fancybox/closelabel.gif') 0 0 no-repeat;
}
Can someone help with this issue?

OK, this is solved. Just need to be specified correct path to image.