We Keep Coding

How can I increase an element's height as child elements are added?

How can the green parent change his height as the yellow child grows? If the user input is very high, the yellow child increases his height to include all the text, but the green parent's height remains the same. I would like the size of the green parent to increase downwards.
I want the parent's height to be proportional to the child's height, if the child is short, the parent should be small, and if the child is tall, the parent should be tall.
$(document).ready(function() {
$("#send-btn").on('click', function() {
$value = $("#input-user").val();
$replyMsg = ' <div class ="user-inbox"><div class ="reply"><p>' + $value + '</p> </div> </div>';
$(".main-content").append($replyMsg);
$("#input-user").val("");
})
});
.main-content {
position: relative;
width: 300px;
height: 300px;
background: red;
}
.user-input {
position: absolute;
bottom: 0;
}
.instant-msg {
position: relative;
top: 0;
left: 5%;
width: 50%;
height: 20%;
background: cyan;
word-break: break-all;
}
.user-inbox {
position: relative;
left: 45%;
width: 100px;
height: auto;
width: 50%;
height: 100px;
background: green;
}
.reply {
position: absolute;
bottom: 10%;
left: 10%;
width: 80%;
height: auto;
min-height: 20%;
border-radius: 25px;
background: yellow;
display: flex;
align-items: center;
justify-content: center;
font-size: 100%;
padding: 5%;
word-break: break-all;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
<div class="instant-msg">
<p>Hello</p>
</div>
<div class="user-input">
<input id="input-user" type="text" placeholder="Type something..." required>
<button id="send-btn">Send</button>
</div>
</div>

I've simplified your layout by making the outer element a flex column and removing all the absolute positioning. I've also narrowed the append target to an interior container, and I removed several redundant and rigid sizing styles. You shouldn't be setting fixed heights on flexible elements.
$(document).ready(function() {
$("#send-btn").on('click', function() {
$value = $("#input-user").val();
$replyMsg = ' <div class ="user-inbox"><div class ="reply"><p>' + $value + '</p> </div> </div>';
$("#inbox").append($replyMsg);
$("#input-user").val("");
})
});
.main-content {
width: 300px;
min-height: 150px;
background: red;
display: flex;
flex-direction: column;
}
.instant-msg {
margin-left: 5%;
width: 50%;
background: cyan;
word-break: break-all;
}
.user-inbox {
margin-left: 45%;
width: 50%;
background: green;
}
.reply {
margin-bottom: 10%;
margin-left: 10%;
width: 80%;
height: auto;
min-height: 20%;
border-radius: 25px;
background: yellow;
display: flex;
align-items: center;
justify-content: center;
font-size: 100%;
padding: 5%;
word-break: break-all;
}
.flex-auto {
flex: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
<div class="instant-msg">
<p>Hello</p>
</div>
<div id="inbox" class="flex-auto"></div>
<div class="user-input">
<input id="input-user" type="text" placeholder="Type something..." required="">
<button id="send-btn">Send</button>
</div>
</div>

This is just a css layout issue only . You need to change couple of css only. Pleae check it out . In main-content. I have used min-height instead of height and in instant-msg, I have given static px size instead of % value.
.main-content {
position: relative;
width: 300px;
min-height: 300px;
background: red;
padding-bottom: 26px;
}
.instant-msg {
position: relative;
top: 0;
left: 5%;
width: 50%;
height: 60px;
background: cyan;
word-break: break-all;
}

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.

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>

Inline divs are not lining up in a row

It's my understanding that simply adding display:inline to divs with a relative position will line them up (left to right), somewhat like float:left. I've tried both approaches but they haven't worked.
Below is an example of my last attempt, using inline displaying. I want all three segments to line up from left to right, but they're displaying just like unstyled divs.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
}
.miniBioSegment {
display: inline;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>

You should use inline-block instead of inline for more control. I used a width of 33%-2px because the browser rounds the div's size up therefore leading to overflowing. Your 5px margins weren't helping with the sum either.
function showProfile() {
var profile = document.getElementById('userprofile');
profile.style.opacity = 0.8;
var profileImage = document.getElementById('userimage');
profileImage.style.opacity = 0.8;
}
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
opacity: 0;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
opacity: 0;
width: 100px;
height: 100px;
display:inline-block;
}
.miniBioSegment{
display: inline-block;
width: calc(33% - 2px);
vertical-align:middle;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>
<button onclick="showProfile()">View Profile</button>

CSS should target the ID's and use float:left. See example
.profile {
top: 68px;
background-color: #424755;
color: #dddddd;
width: 100%;
min-height: 50px;
position: fixed;
font: 16px"Tahoma";
}
.miniProfileImage {
float:left;
max-width: 33%;
height: 100px;
}
#miniBio {
float:left;
margin-right: 5px;
width: 33%;
}
#miniQuote {
float:left;
margin-right: 5px;
width: 33%;
}
<div class="profile" id="userprofile">
<div class="miniBioSegment">
<img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
</div>
<div id="miniBio" class="miniBioSegment">
This is basic information about this person that you clicked.
</div>
<div id="miniQuote" class="miniBioSegment">
This is a tag line from the person that you clicked.
</div>
</div>

I'm asking myself, why do you have position:absolute;?
To make it work, I have just added display: flex; justify-content: space-between; to the .profileclass.
Remove the position, and try adding the last two lines.
See example here: http://sandbox.clickadelic.de/demos/lineup.html

With the divs set to display: inline; they will only line up horizontally if the total length of the divs does not exceed the container's width.
And width, height of inline elements is ignored, you should use display: inline-block; instead. The wrapping behavior is the same as above.
Also browser renders whitespace among inline* elements, which is about 4px, see How to remove the space between inline-block elements? for more details.
In your example, there are 3 divs, if you want them to be equal width, you can do:
.profile {
font-size: 0; /*remove whitespace*/
background: silver;
}
.miniBioSegment {
font-size: 16px; /*reset font-size*/
display: inline-block;
vertical-align: top; /*vertical alignment*/
width: 33.3333%;
}
However, the image object in the first div is set to 100px, I think you would prefer that div to be the same width too, and each one takes 50% of the rest space for other two divs. Examples:
1. Inline block
jsFiddle
.profile {
font-size: 0;
background: silver;
}
.miniBioSegment {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
2. Float
jsFiddle
.profile {
background: silver;
}
.profile:after {
content: "";
display: table;
clear: both;
}
.miniBioSegment {
float: left;
border: 1px dotted red;
box-sizing: border-box;
width: 100px;
}
#miniBio, #miniQuote {
width: calc((100% - 100px) / 2);
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
3. CSS table
jsFiddle
.profile {
background: silver;
display: table;
border-collapse: collapse;
width: 100%;
}
.miniBioSegment {
display: table-cell;
vertical-align: top;
border: 1px dotted red;
}
#miniBio, #miniQuote {
width: 50%;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}
4. Flexbox
jsFiddle
.profile {
background: silver;
display: flex;
}
.miniBioSegment {
border: 1px dotted red;
}
#miniBio, #miniQuote {
flex: 1;
}
.miniProfileImage {
width: 100px;
height: 100px;
display: block;
}

Centering CSS Boxes(Html and Css)

I am trying to center these boxes in the middle of the screen both horizontally and vertically. Another question is how can I make it where it re-sizes automatically when I scale my page?
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
}
.home-link{
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link{
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link{
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link{
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link{
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Neiko Anglin | Front-End Develper </title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome Stylesheet -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
</body>
</html>

You can use absolute positioning on the container to center vertically and horizontally:
/*-------------------------
Simple reset
--------------------------*/
* {
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: absolute;
background: white;
height: 84px;
width: 60%;
margin: auto;
padding: 20px;
overflow: auto;
top:0;
right:0;
bottom:0;
left:0;
}
.home-link {
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>

To align vertically you need a wrapper class with position absolute in CSS. Search for vertical center which will fetch you lots of results.
To resize boxes along with screen resize - is responsive template. I could suggest you to use Twitter Bootstrap which takes care of your dimensions.

Change your .nav-color class to
.nav-colors{
position: fixed;
background: white;
height: 80px;
width:60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top:50%;
left:20%;
}
/*-------------------------
Simple reset
--------------------------*/
* {
margin: 0;
padding: 0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: fixed;
background: white;
height: 80px;
width: 60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top: 50%;
left: 20%;
}
.home-link {
background-color: #00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color: #ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color: #53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color: #f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color: #df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>

You just have to add some properties to your .nav-colors:
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
line-height: 200px;
text-align: center;
}
And add vertical-align: middle; to elements you want to center vertically.

First the explanation, then some code.
Vertical centering is a classic css issue. The vh unit has come in very handy for this recently. Coupled with margin (and maybe calc) its now a solvable thing.
Centering it horizontally is simple enough, and you have that figured out. Just have a width and set margin: 0 auto and you are good to go.
With Vertical Centering the key thing to remember is you are centering your element, so half is over the middle, half is under the middle. With that we can make margin: calc(50vh-40px) auto 0 for your 80px high element and presto, it's in the middle vertically.
One step further:
Like horizontal centering, you seem to already have the dynamic width down by using %.
For a dynamic vertical size we can again turn to vh. The nice thing is this saves us the css calc function. Just subtract half the height from the 50vh margin and you'll get your margin. So for height: 20vh the margin is margin: 40vh auto 0
Here is a JsFiddle
and here is some code:
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
width: 100vw;
height: 100vh;
}
.nav-colors{
width: 80%;
height: 20vh;
margin: calc(40vh) auto 0;
}
.nav-colors div{
width: 18%;
margin: 0 0 0 1%;
height: 100%;
display: inline-block;
}
.home-link{background-color:#00c08b;}
.portfolio-link{background-color:#ea5080;}
.social-link{background-color:#53bfe2;}
.contact-link{background-color:#f8c54d;}
.blog-link{background-color:#df6dc2;}
HTML:
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>
enjoy.