We Keep Coding

How to resize bottom fixed div when top div is collapsed?

I have two divs, one on top, the other on the bottom. I need to have the bottom div fixed, and to resize and occupy the space above when the div on top is collapsed. Links to the scenarios below. Is this possible to accomplish using only CSS? This is for an angularJS application.
UPDATE: Support for older versions of browsers, specifically IE, must also be considered.
Div1 expanded
Div1 collapsed

Yes, you can do this using flex. See snippet below.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("max-height", "50px")
});
});
body, html {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.box {
flex-grow: 1;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->
Update
Since you noted in the comments you wanna support older browsers, the same as above can be achieved using the old fasion table layout.
$(document).ready(function() {
$("#div1").click(function() {
$(this).css("height", "50px")
});
});
html, body {
height: 100%;
margin: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.box {
display: table-cell;
color: #fff;
vertical-align: middle;
text-align: center;
}
#div1 {
background-color: #4472C4;
}
#div2 {
background-color: #ED7D31;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="box" id="div1">
<strong>div1</strong>
</div>
</div>
<div class="row">
<div class="box" id="div2">
<strong>div1</strong>
</div>
</div>
</div>

You can try this.
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow;
}
.content {
display: table-row;
/* height is dynamic, and will expand... */
height: 100%;
/* ...as content is added (won't scroll) */
background: yellow;
}
.footer {
display: table-row;
background: grey;
}
<div class="wrapper">
<div class="content">
<h2>Content</h2>
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>

you can try this it works fine for me
<div class="wrapper">
<div class="container">
<div class="top-div">
topd div
</div>
<div class="bottom-div">
bottom div
</div>
</div>
</div>
CSS
.wrapper{
float:left;
height:100%;
}
.container {
position:absolute;
display: block;
float: left;
width: 100%;
height: 100%;
min-height:100%;
}
.top-div {
margin: 5px;
float: left;
position: fixed;
top: 0;
width: 90%;
height: 30%;
background-color: red;
}
.bottom-div {
margin: 5px;
position: absolute;
float: left;
bottom: 0;
width: 90%;
background-color: green;
}
use jQuery
$(function() {
var containerH = $(".container").height();
var topdivH = $(".top-div").height();
$(".bottom-div").height(containerH - topdivH);
});
check out jsfiddle

Adding content to div causes it to shift?

In the following code, I have a simple page setup, but as soon as I add something to the div with class page the whole main page div shifts downwards?
try adding <h1>hello</h1> to the div with class page.
what is the problem, the div should remain there and simply <h1>hello</h1> should be added!
code: https://jsfiddle.net/5sx0sj2q/
.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: 500px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-left: 2px;
height: 2000px;
display: inline-block;
box-sizing: border-box;
}
.page{
width: 100%;
height: 100%;
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: #031003;
}
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>

Yes there's a trick for that :
.mainpage{
vertical-align : top; // Add this
}
Also, change the H1 display property :
h1{
display : inline-block;
}
All the elements stay up where they should be. The joys of CSS.
Working Fiddle

Is normal, display: inline-block add a little space between elements (and you have no more space).
Use float left instead and your code works.

How to fix an element to the right of div?

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>

The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.

You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>

For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>

not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle

It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>

Popup window on landing page

I made a landing page with goods.
Every good has a description and a price.
When you click open a "popup window" should open, with the picture and description.
The question is, what if i have a lot of goods so with html and some framework popup, I will need to do all the description in html, can I somehow make a template of popup window, and provide description of goods in popup window through javascript ?

Basically you need a code which displays a modal window and the same code should also display full product details in it.
Normally, if you have a category page which displays product summary you would need to populate the modal window (which some call popup) with complete product details taken in via Ajax (the website should be able to output product data in JSON format if you got to an URL like mystore.com/ajax/p/10101 where 10101 is the product id. It depends on the website creator.
Anyways, an example JS code with modal window and which displays the product info from the page you are on is below.
$(".view").click(function(){
$(".overlay").show();
var pName = $(this).parent().children(".itemName").text();
var pPrice = $(this).parent().children(".itemPrice").text();
var pDescription = $(this).parent().children(".itemDescription").text();
$(".productName").text(pName);
$(".productPrice").text(pPrice);
$(".productDescription").text(pDescription);
});
$(".close").click(function(e){
e.preventDefault();
$(".overlay").hide();
});
.content {
display: block;
width: 100%;
position: relative;
}
.products {
width: 100%;
float: left;
display: block;
position: relative;
}
.item {
position: relative;
width: 45%;
float: left;
display: block;
margin-right: 10px;
border: solid 1px #ccc;
padding: 4px;
height: 150px;
box-sizing: border-box;
}
.itemImage {
width: 50%;
float: left;
height: 138px;
border: solid 1px green;
margin-right: 10px;
}
.itemName {
font: 500 20px/25px Arial;
}
.itemPrice {
font-weight: bolder;
}
.itemDescription {
font: 300 16px/18px Arial;
}
.view {
font: 100 9px/10px Arial;
}
.view:hover {
cursor: pointer;
}
.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 300px;
background: rgba(0,0,0,0.4);
}
.popup {
display: block;
position: absolute;
top: 50px;
left: 200px;
width: 300px;
height: 150px;
background: #fff;
}
.close {
position: absolute;
top: 10px;
right: 10px;
}
.product {
position: absolute;
top: 30px;
left: 20px;
}
.productImage {
width: 100px;;
display: block;
float: left;
margin-right: 10px;
position: relative;
height: 100px;
border: solid 1px red;
}
.productName {
font: 500 15px/16px Arial;
float: left;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="products">
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 1</div>
<div class="itemPrice"> $100 </div>
<div class="itemDescription"> Description 1 in here.</div>
<span class="view">View popup</span>
</div>
<div class="item">
<div class="itemImage"><img src="" /></div>
<div class="itemName"> Product 2</div>
<div class="itemPrice"> $300 </div>
<div class="itemDescription"> Description 2 in here.</div>
<span class="view">View popup</span>
</div>
</div>
<div class="overlay">
<div class="popup">
Close X
<div class="product">
<div class="productImage"><img src="" /></div>
<div class="productName"> xxxxxx</div>
<div class="productPrice"> uuuuuuuu </div>
<div class="productDescription"> tttttttt </div>
</div>
</div>
</div>
</div>

Problems with positioning and z-index

I'm trying to have the menu overlap content, but as of now it moves the content box away.
I've already tried the position: relative trick, but the problem doesn't seem to go away. The solution is probably something really obvious, but I need help finding it.
EDIT: Sorry, forgot to add, the box will also be resizable() so I'm trying to avoid absolute positioning.
EDIT2: nevermind, right:5px fixes that problem
JSFiddle
HTML
<div class="box">
<div class="top">
<div class="icon"></div>
<div class="menubox">
<ul class="menu">
<li>Menu Option 1
</li>
<li>Menu Option 2
</li>
</ul>
</div>
</div>
<div class="content">
<p>content goes here</p>
</div>
<div class="content">
<p>content goes here</p>
</div>
</div>
CSS
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
}
.top {
width: 100%;
height: 25px;
background: lightblue;
}
.icon {
float: right;
background: red;
height: 15px;
width: 15px;
margin: 5px;
}
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
}
.content {
width: 180px;
height: 165px;
margin: 0px 10px 47px;
float: left;
position: relative;
z-index: 0;
display: block;
background:DarkGray;
}
li {
list-style-type: none;
text-decoration: none;
}
ul {
margin:none;
padding:none;
}
JS/jQuery
$('.icon').mouseover(function () {
$(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
$(this).hide();
});

use position: absolute?
fiddle
.menubox {
float: right;
background: yellow;
position: relative;
z-index:100;
width: 150px;
top: 25px;
right: 5px;
position: absolute;
}
.box {
width: 400px;
height: 200px;
margin: 5px;
float: left;
background: LightGray;
border: 1px solid DarkGray;
overflow: hidden;
position: relative; /* add this */
}
Edit: better position

The yellow menubox needs to be positioned absolutely so it does not interfere with the flow of the document (take up space).
Give it a position:absolute;
Furthermore, the .box element needs to have a position:relative so the menu is positioned relative to that box.
Updated your fiddle for you:
http://jsfiddle.net/CcVnL/11/

Check the below link i have updated your code.
"jsfiddle.net/CcVnL/9/"