We Keep Coding

Inherit padding width without position absolute? Is it possible?

Not sure, but I am currently not able to figure out. I'm trying to center the inner div (blue transparent one) from the parent (with the red background) inside the background. As an example, they're technically in each other perfectly at the first example in the snippet.
At the second example however I've added padding: 5px; to both of them to the red and blue one. To the blue one because I wanted to inherit the width some how.
https://jsfiddle.net/L8enbcy3/
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>
What I'm trying is to get "box2" centered into "box1" like example 1 but with its padding, so that's covered by blue. without having to position: absolute it, if possible. What I'm thinking I have to do is to create and invisibile box absolute it, "center it with top: 0 and left: 0 when the parent has position: relative. Then as I mentioned with it being absolute it would go to the corners of the parents padding too and then in the absolute box, I would create a relative one with display: table and put in all the content.
My question now though is, is there another way to do that?

Solution 1: transform: translate()
You could use transform: translate() with variables to achieve what you want, without weird margins (next solution). Here's some MDN about translate().
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
}
.box2 {
height: calc(50px + var(--padding)*2);
width: calc(50px + var(--padding)*2);
background-color: #0000ffb0;
transform: translate(calc(0px - var(--padding)), calc(0px - var(--padding)))
}
<div class="box1">
<div class="box2"></div>
</div>
As you can see, the box is brought up and left with translate, and the height is lengthened by adding the needed padding to it. Thisachieves the desired cover effect.
Solution 2: Positive padding, negative margin
You could also use positive paddings and negative margins. Info below code snippet.
:root {
--padding: 5px;
}
.box1 {
height: 50px;
width: 50px;
background-color: red;
padding: var(--padding);
position: relative;
display: block;
}
.box2 {
height: 50px;
width: 50px;
background-color: #0000ffb0;
padding: var(--padding);
margin: calc(0px - var(--padding));
}
<div class="box1">
<div class="box2"></div>
</div>
What's happening here is following the CSS box model, found on MDN and w3schools. We're simply pushing out with margin and sucking in with padding.
Then, as per request in the comments, --padding is a CSS variable that stores the amount of padding that you want.
Hope I helped!
Cheers, Bobbay

You can add a negative margin if you insist on keeping the padding in place.
.box-1-1 {
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box-1-2 {
width: 50px;
height: 50px;
background: #0000ffb0;
position: relative;
}
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 50px;
height: 50px;
background: #0000ffb0;
padding: 5px;
margin: -5px;
}
<div class="box-1-1">
<div class="box-1-2"></div>
</div>
<pre>
</pre>
<div class="box1">
<div class="box2"></div>
</div>

To center box2 within box1 without absolute position, you can use following css:
.box1 {
display: flex;
align-items: center;
justify-content: center;
}

Edit: example 2 illustrate your need. just remove padding from both boxes and settop: 0; and 'left: 0' with position: relative on box 2. I hope this is the required solution
to center box 2 you need to make its dimension less than box 1. consider the extra pixels added with padding. so the inner box width and height should be 10px less than the outer box.
Example:
.box1 {
width: 50px;
height: 50px;
background: red;
padding: 5px;
position: relative;
display: block;
}
.box2 {
width: 40px;
height: 40px;
background: #0000ffb0;
padding: 5px;
}
.box1-1 {
border: 2px solid yellow;
width: 50px;
height: 50px;
background: red;
position: relative;
display: block;
}
.box2-2 {
position:relative;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #0000ffb0;
}
<div class="box1">
<div class="box2"></div>
</div>
<br>
<div class="box1-1">
<div class="box2-2"></div>
</div>

Slide out menu bar with click not working

Exhausted in trying to figure out what is wrong. I can't seem to get my menu box to slide out.
https://jsfiddle.net/87cd9341/5/
My sliding menu box does not slide out when I click on the "nav-toggle".
Not sure if z-index has anything to do with it because I'm using it to cover some elements, but it shouldn't right?
I just added the main elements of the code...when you click the black tab, the blue box is suppose to shoot out right?
When I I manually add "open" into class for the "nav-side" into the html or input 0% into the transform section of the "nav-side" into the css, this is what I want to happen after I click the "nav-toggle' with jquery/javascript.
<div class="nav-side">
</div>
<div class="tab-container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
.plageholder-container {
display: block;
width: 29.064039%;
min-width: 121px;
max-width: 121px;
margin-left: 2.955665%;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background: #ffffff;
z-index:2;
}
.nav-side {
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 295px;
max-width: 500px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background-color:blue;
z-index:1;
margin-left: 2.955665%;
padding-left: 120px;
transform:translateX(-100%);
transition: transform .06s ease;
}
.nav-side.open {
transform:translateX(0);
}
.tab-container{
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 25px;
max-width: 25px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 126px;
padding-right: 0px;
overflow: hidden;
background-color:#ffffcc;
z-index:0;
margin-left: 2.955665%;
}
.nav-toggle{
position: relative;
position: relative;
display: inline-block;
top: 3px;
width:25px;
height:121px;
background-image: url(../Buttons/Button-About_Slider_Letter.svg);
}
$(".nav-toggle").on("click", function(){
$("nav-side").toggleClass("open");
});
});
Theoretically, if my research is correct I think class="nav-side" is suppose to change to class="nav-side open"
when I click the "nav-toggle" link ????????

The problem is probably either the position or z-index. Please provide a jsfiddle.

Missing a dot . in $("nav-side")
$(".nav-side").toggleClass("open");

Instafeed / html responsive Section

I have an Instagram section on my website which works the way I want it but I want to add another div with background color and text to the right of it so it looks like it is part of the grid but it's not!
I have it set up but when scaling the browser it does not stay with it at all can anybody help me out? Here are my HTML and CSS and also an image on how it should look.
.Container-Instagram {
margin-top: 5%;
width: 85%;
}
.H1-Instagram {
font-size: 48px;
color: #d7aa44;
}
.Instagram-Title {
background-color: #f8db74;
position: absolute;
margin-top: 204px;
margin-left: 792px;
padding: 30px;
width: 50%;
height: 187px;
text-align: center;
}
.cross-text2 {
display: inline-block;
position: relative;
}
.cross-text2::before {
background-color: #d7aa44;
content: "";
height: 4px;
position: absolute;
top: 37px;
left: 4px;
width: 100%;
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.Container-Instagram a {
border: 5px solid #fff;
display: inline-block;
line-height: 0;
width: 20%;
}
.Container-Instagram #instafeed a:first-child {
margin-left: 40%;
}
.Container-Instagram #instafeed a:nth-child(8n + 8) {
margin-left: 0.05%;
}
.instagram-section {
width: 75%;
}
<div class="Container-Instagram">
<div class="Instagram-Title"><h1 class="H1-Instagram">Get On The <span class="cross-text2">Insta</span> Gram</h1></div>
<div id="instafeed" class="instagram-section"></div>
</div>
The snippet does not work because of the JS but it is just for showing my code. this is what the end result should look like(red squares are instagram posts):
Image Example
Here is the web address I'm using to develop on if you want a better view of what I mean http://s749376357.websitehome.co.uk/ :D Thanks

Remove the margin-left:792px; on .Instagram-Title replace it with right:100px; then add position:relative; to .Container-Instagram this will then follow as you resize - you will however still need to do some work to make it fully responsive.

Positioning a div at specific fixed place irrespective of zoom and scroll

I have a header with fixed position and inside header I have navigation links but when I zoom into browser links are thrown out of window to right. How can I make the navigation links fixed to 50px right no matter I zoom in or out.
jsfiddle here I don't want to change properties of header.
.header {
width: 100%;
min-width: 500px;
position: fixed;
background: red;
height: 60px;
}
.navlinks {
float: right;
margin-right: 50px;
width: 30px;
margin-top: 4px;
height: 20px;
background: black;
}
<div class="header">hello
<div class='navlinks'></div>
</div>

You've already set the fixed position header to width:100% so the min-width:500px is unnecessary.
Remove that and the issue is solved.
.header {
width: 100%;
position: fixed;
background: red;
height: 60px;
}
.navlinks {
float: right;
margin-right: 50px;
width: 30px;
margin-top: 4px;
height: 20px;
background: black;
}
<div class="header">hello
<div class='navlinks'></div>
</div>
JSfiddle Demo

On display of hidden element it shows on wrong place because of scroll, only in chrome

I don't realy know how to explain this thing in short sentence.
I don't know if it is bug or not..
In parent div with fixed height and overflow-y scroll, I have multiple children elements, which has jquery function click, what displays hidden element in these divs. When I scroll down to last div, after click, hidden element displays in wrong place.
I tried to search for this problem, cause it should be pretty common. But nothing came up.s
It's realy hard to explain with words. Just look at this jquery example with mozilla and after that with chrome.
https://jsfiddle.net/zvwcdzjz/2/#
P.S. I need my original example work and look exactly the same on chrome and mozilla, cause right now on mozilla everything looks exactly as i want it to be, but it bugs on chrome.
It can be solved with jQuery too, makes no difference for me.
HTML:
<div id="el">
<div class="content">
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
<div class="block">
<div class="blocktoopen"></div>
<div class="button">click to open</div>
</div>
</div>
</div>
CSS:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
margin-left: 300px;
background-color: red;
display: none;
}
JS:
$(function(){
$(".button").click(function(){
$(this).parent(".block").children(".blocktoopen").show();
});
$("#el").scroll(function(){
$(".blocktoopen").hide(); });
});

The set height of #el was causing the red box to appear in the incorrect location. I have removed this. See the example below:
Change:
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
To:
#el {
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
And then you're good to go.

To make your life simpler make the parent .bloc relative so the blocktoopen will be computed relatively. Will help with the responsiveness.
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
bottom: 50%;
background-color: red;
display: none;
right: 0;
}

I can't post comment so here is another try with jsfiddle. I am not sure if you have horizontal scroll as well. remove margin-right from .blocktoopen and add right:0; Also wrap all your internal content inside a div and set the width to maybe 225px
#el {
width: 300px;
height: 400px;
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0,0,0,0.1);
}
#el .content {
width: 300px;
height: auto;
}
.block {
width: 300px;
height: 200px;
margin-top: 10px;
background-color: rgba(0,0,0,0.2);
position: relative;
}
.button {
background-color: blue;
color: #fff;
cursor: pointer;
text-align: center;
margin-top: 90px;
float: left;
}
.blocktoopen {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
display: none;
top: 50%;
bottom: 50%;
right: 0;
}
.internal{
width: 225px;
}

Have you tried to click on 2 buttons without scrolling? Try it. Looks like you were using visibility: hidden; and not display: none;. Maybe trying to set the position: relative; ...
Just seen the jquery script. Show() and hide() appears to work as visibility css property.
If u look with Chrome DevTools the jsFiddle example you will see that you can't see the red boxes but they are still there.