We Keep Coding

how to make container unsticky after some point

Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>

Anyone have easy way to create this using css and html?

I have done this with below code, But I this it is a difficult way to do this anyone have easy way for create this with css and html.
.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>

.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

In this way you can add as many items as you want.
.p {
display: flex;
position: relative;
padding-top: 15px;
border-top: 2px solid red;
margin-bottom: 30px;
}
.p div {
position: relative;
flex: 1;
text-align: center;
}
.p div:after {
content: '';
position: absolute;
height: 15px;
width: 2px;
background: red;
top: -15px;
}
.p div:not(:first-child):not(:last-child):after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.p div:first-child {
text-align: left;
}
.p div:first-child:after {
left: 0;
}
.p div:last-child {
text-align: right;
}
.p div:last-child:after {
right: 0;
}
<div class="p">
<div>
Low
</div>
<div>
Average
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
High
</div>
</div>
<div class="p">
<div>
Low
</div>
<div>
Average -2
</div>
<div>
Average -1
</div>
<div>
Average
</div>
<div>
Average 1
</div>
<div>
Average 2
</div>
<div>
High
</div>
</div>

This is just a sample you can modify it to meet your requirments
.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
}
<div class="box">
<div></div>
<div></div>
<div></div>
</div>

.box {
display: flex;
border-top:1px solid #000;
}
.box>div:not(:last-child)
{
border-left:1px solid #000;
}
.box>div:last-child
{
border-right:1px solid #000;
}
.box>div
{
flex: 1 1 auto;
padding:10px;
padding-top:40px;
}
<div class="box">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>

.grid{width:calc(100% - 20px);max-width:1000px;margin:0 auto;;border-top:3px solid red;display:flex;flex-direction:row;align-items:baseline;justify-content: space-between;}
.fline{position:relative;overflow:hidden;min-height:40px;float: left;padding-top: 20px;}
.fline::before{position:absolute;content:"";top:0;width:2px;height:20px;background:red}
.fline:first-child::before{left:0}
.fline:nth-of-type(2)::before{left:calc(50% - 2px)}
.fline:last-child::before{left:unset;right:0}
<div class="grid">
<div class="fline">Low</div>
<div class="fline">High</div>
<div class="fline">Average</div>
</div>

.fline {
width: 2px;
background-color: black;
height: 10px;
margin-left: 30%;
margin-top: -9px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 60%;
margin-top: -10px;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
margin-left: 88.2%;
margin-top: -11px;
}
<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline">Low</div>
<div class="fline1">Average</div>
<div class="fline2">High</div>

First you need to define one outer wrap and define width as you want to this.
And position:relative for this.
For first inner div with float:left; and last with float:right;.
And center div with position:absolute; with margin:auto; from left and right;
And margin-top depend on your parent div outer-wrap width for inner div like: fline,fline1,fline2
.outer-wrap{
width: 80%;
height: 1px;
background-color: #000;
margin: auto;
text-align: center;
position: relative;
}
.fline {
width: 2px;
background-color: black;
height: 10px;
float: left;
margin-top: 1px;
}
.fline1 {
width: 2px;
background-color: black;
height: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.fline2 {
width: 2px;
background-color: black;
height: 10px;
float: right;
margin-top: 1px;
}
<div class="outer-wrap">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>
</div>

This one is the right answer to this question
.scale-container {
width: 300px;
}
.scale {
width: 296px;
height: 20px;
border: 2px solid black;
border-bottom: none;
}
.scale>div {
width: 50%;
height: 20px;
border-right: 2px solid black;
}
.label-container {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="scale-container">
<div class="scale">
<div></div>
</div>
<div class="label-container">
<div>Low</div>
<div>Average</div>
<div>High</div>
</div>
</div>

CSS hover over two different elements and affect one same element

Is there a way on hover two divs to affect one div different ways?
The best be to know the solution in CSS way, but if there is no CSS way then I am open to JQuery or Javascript way.
For example when I hover over div myData1, then I affect separator to have some style. And when I hover over div myData2, then I affect separator to be in any other unique way.
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData1:hover + #separator{
width: 50px;
heightL 100px;
background-color: #cba;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>

Using jQuery, this would be a solution:
$('.myData1').mouseover(function() {
$('#separator').css('background-color', '#cba');
});
$('.myData1').mouseout(function() {
$('#separator').css('background-color', '#666');
});
$('.myData2').mouseover(function() {
$('#separator').css('background-color', '#dba');
});
$('.myData2').mouseout(function() {
$('#separator').css('background-color', '#666');
});
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>

Just with css:
.wrapper {
position: relative;
}
.myData1 {
width: 50px;
height: 50px;
background-color: #444;
}
#separator {
width: 50px;
height: 100px;
background-color: #666;
position: relative;
top: -50px;
}
.myData2 {
width: 50px;
height: 50px;
background-color: #888;
position: relative;
top: 100px;
}
.myData1:hover ~ #separator {
background-color: #cba;
}
.myData2:hover ~ #separator {
background-color: #cba;
}
<div class="wrapper">
<div class="myData1"></div>
<div class="myData2"></div>
<div id="separator"></div>
</div>

.data{
position : relative;
height:200px;
width:50px;
display:inline-block
}
.myData1{
width: 50px;
height: 50px;
background-color: #444;
display:inline-block;
position:absolute;
top:0px;
}
.myData1:hover + #separator2{
width: 50px;
height: 100px;
background-color: blue;
display:inline-block;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
display:inline-block;
position:absolute;
bottom:0px;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
display:inline-block;
position:absolute;
top:50px;
}
#separator2{
width: 50px;
height: 100px;
background-color: #666;
display:none;
z-index:99999;
position:absolute;
top:50px;
}
<div class="data">
<div class="myData1">
</div>
<div id="separator2"></div>
<div class="myData2">
</div>
<div id="separator"></div>
</div>
Try this

width: 100% is not working on children div if parent div has width: calc(100% - 300px)?

I have the following arrangement:
I have parent div with class container with width: 100%; and also both html and body have width: 100%, and so far it is working as expected.
But inside div with class container, i have two divs, one div with width: 300px,
and other div with width: calc(100% - 300px),
where parent with class mainpage has width: calc(100% - 300px), and child div with class page has width: 100%;
but width: 100% is not working on this div?
even though parent div width is determinant.
code: https://jsfiddle.net/tj8k0nnw/1/
.container {
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer {
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer {
position: relative;
width: 100%;
height: 100%;
}
.sidebar {
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage {
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page {
width: 100%;
width: 100%;
background-color: white;
}
.footer {
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1 {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2 {
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<!--
-->
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>

The code provided is working. You have not specified a height for page so the height is 0. Giving it a height causes it to become visible: https://jsfiddle.net/kvjw9vhm/
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height: 100%; /* was width: 100%; */
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1{
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2{
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>

Above provided code is working , just add some height in page class.
.page{
width: 100%;
height:100px;
background-color: green;
}
By default height is 0 ,if there's no content .Below is demonstration, check it out:
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height:100px;
background-color: green;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>

Looks like there is not much problem with your code and you did a typo by mentioning width twice in the .page class. Changing one of them to height worked fine for me and should work for you too.
Let me know if you face any problem.

Max-height: 0 not collapsing Div

I would like my chat box to collapse when they touch the header of the chat, similar to facebook. I know that hide_wrapBox is correctly being added, but it doesn't set the height of its contained elements to a (collapsed) fixed height. In other words, the messages inside the chat box
disappear but the box still stands, where I'd prefer it to minimize.
<div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
<!-- Messages container -->
<div id="messages-card" style="display:none;" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
<div id="convoHeader">HEADER</div>
<div class="wrapBox">
<div id="messages">
<span id="message-filler"></span>
</div>
<form id="message-form" action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="message" placeholder="Type a message...">
</div>
</form>
<form id="image-form" action="#">
<input id="mediaCapture" type="file" accept="image/*,capture=camera">
<button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
</button>
</form>
</div>
</div>
</div>
<div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
<div class="mdl-snackbar__text"></div>
<button class="mdl-snackbar__action" type="button"></button>
</div>
</div>
Jquery:
<script>
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').hide();
$('#messages').addClass('hide_wrapBox');
console.log('you get here');
}else{
$('.wrapBox').show();
$('#messages').removeClass('hide_wrapBox');
}
});
</script>
CSS:
.hide_wrapBox {
max-height: 0;
width: 5px;
bottom:0;
outline: 4px solid red;
}
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
#messages-card-container {
position: absolute;
right:0;
z-index: 1;
height: 400px;
bottom: 0%;
}
.mdl-layout__header-row span {
margin-left: 15px;
margin-top: 17px;
}
.mdl-grid {
max-width: 1024px;
margin: auto;
}
.material-icons {
font-size: 36px;
top: 8px;
position: relative;
}
.mdl-layout__header-row {
padding: 0;
margin: 0 auto;
}
.mdl-card__supporting-text {
position:relative;
width: auto;
height: 100%;
padding-top: 0;
padding-bottom: 0;
box-shadow: 0px 0px 2px 2px #888888;
}
#convoHeader, innerHTML{
position: relative;
color: white;
}
#convoHeader{
position:relative;
background-color: #c4d8e2;
padding-bottom: 6px;
}
#convoHeader: hover{
cursor:pointer;
}
#messages {
overflow-y: auto;
margin-bottom: 10px;
height: 270px;
//outline: 2px solid red;
}
#message-filler {
flex-grow: 1;
}
.message-container:first-of-type {
border-top-width: 0;
}
.message-container {
display: block;
margin-top: 10px;
border-top: 1px solid #f3f3f3;
padding-top: 10px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.message-container.visible {
opacity: 1;
}
.message-container .pic {
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 30px;
height: 30px;
background-size: 30px;
border-radius: 20px;
}
.message-container .spacing {
display: table-cell;
vertical-align: top;
}
.message-container .message {
display: table-cell;
width: calc(100% - 40px);
padding: 5px 0 5px 10px;
color: #666666;
}
.message-container .name {
display: inline-block;
width: 100%;
padding-left: 40px;
color: #bbb;
font-style: italic;
font-size: 12px;
box-sizing: border-box;
}
#message-form {
display: flex;
flex-direction: row;
float: left;
}
#image-form {
display: flex;
flex-direction: row;
width: 48px;
float: right;
}
#message-form .mdl-textfield {
//width: 300px;
position:absolute;
bottom:0;
}
#message-form, input{
width:295px;
height:32px;
font-size: 12px;
position:absolute;
bottom:0;
}
#message-form button, #image-form button {
width: 100px;
margin: 15px 0 0 10px;
}
.mdl-card {
min-height: 0;
}
.mdl-card {
background: linear-gradient(white, #f9f9f9);
justify-content: space-between;
}
#user-container {
position: absolute;
display: flex;
flex-direction: row;
top: 22px;
width: 100%;
right: 0;
padding-left: 10px;
justify-content: flex-end;
padding-right: 10px;
}
#user-container #user-pic {
top: -3px;
position: relative;
display: inline-block;
background-image: url('/images/profile_placeholder.png');
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-size: 40px;
border-radius: 20px;
}
#user-container #user-name {
font-size: 16px;
line-height: 36px;
padding-right: 10px;
padding-left: 20px;
}
#image-form #submitImage {
width: auto;
padding: 0 6px 0 1px;
min-width: 0;
}
#image-form #submitImage .material-icons {
top: -1px;
}
.message img {
max-width: 300px;
max-height: 200px;
}
#mediaCapture {
display: none;
}
#media screen and (max-width: 610px) {
header {
height: 113px;
padding-bottom: 80px !important;
}
#user-container {
top: 72px;
background-color: rgb(3,155,229);
height: 38px;
padding-top: 3px;
padding-right: 2px;
}
#user-container #user-pic {
top: 2px;
width: 33px;
height: 33px;
background-size: 33px;
}
}
.mdl-textfield__label:after {
background-color: #0288D1;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
color: #0288D1;
}
.mdl-button .material-icons {
top: -1px;
margin-right: 5px;
}

It's actually collapsing, but you have the wrapper around those divs such as #messages-card which is setting a height. So while #messages is collapsing, parent of #messages-card is maintaining the height you have set, making it appear nothing is collapsing:
#messages-card {
float: right;
z-index: 1;
height: 400px;
width: 300px;
bottom: 0%;
margin-top: 15px;
}
You'll need to play around with adjusting that wrapper's height, and it's positioning to resolve the issue you're having.

Instead of adding hide_wrapBox to messages try toggling it on wrapBox
$('#convoHeader').click(function(){
if($('.wrapBox').is(":visible")){
$('.wrapBox').addClass('hide_wrapBox');
}else{
$('.wrapBox').removeClass('hide_wrapBox');
}
});