We Keep Coding

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.

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.

Loading an Image in `<div>` overrides html text

I'm writing an html page that should have the following behavior:
When loaded it contains an empty <div> with a link inside it.
Once pressed the link runs the script StartTrial.js which is supposed to load an image from a directory, visualize it, and give some instructions on what to do.
However, as you can see, once the image is loaded it covers the instructions. This is cause the instructions are written in a <div> that has a margin of 30px from the container <div> with its size before loading the image. How can I fix my code so that the text is always shown with a 30px margin from the bottom of the image?
Here are my code snippets:
Html
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: gray;
width: 300px;
height: 300px;
margin: 30px;
}
.displays {
position: absolute;
display: none;
top: 0px;
left: 0px;
}
JavaScript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}

Change your css to use min-height and min-width
#container {
position: relative;
background: gray;
min-width: 300px;
min-height: 300px;
margin: 30px;
}
and remove the absolute positioning, as there is no real need for it.
.displays {
display: none;
top: 0px;
left: 0px;
}
Your image is larger than the container and hence it is overlapping the instructions.

No need to over-engineer it, you can have a css only solution or a simple JS one as follows:
CSS only solution
HTML:
<input type="checkbox" id="startCheckbox" class="start-checkbox"/>
<div id="container" class="container">
<label for="startCheckbox" class="start-trial center">Start Trial</label>
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
text-decoration: underline;
cursor: pointer;
}
.container .start-checkbox {
display: none;
}
.start-checkbox {
display: none;
}
.start-checkbox:checked ~ .container .start-trial {
display: none;
}
.start-checkbox:checked ~ .container .instruction {
display: block;
}
.start-checkbox:checked ~ .container {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
Fiddle: http://jsfiddle.net/qobbkh6f/5/
CSS+JS Solution
HTML:
<div id="container" class="container">
Start Trial
<div class="instruction center" id="instr_1">
<p><b>Instruction:</b></p>
<p>Some text here.</p>
</div>
</div>
CSS:
.center {
position: absolute;
top:0; right:0; bottom:0; left:0;
margin: auto;
}
.container {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.container .instruction {
border: 1px dashed #333;
background: rgba(255,238,221,.9);
width: 250px;
height: 250px;
padding: 25px;
text-align: center;
display: none;
}
.container.clicked {
background: url(http://www.ceritaspros.com/dev/images/dogs/FunnyPuppies/funny-puppies-sleeping-400x400.jpg);
}
.container.clicked .start-trial {
display: none;
}
.container.clicked .instruction {
display: block;
}
.copntainer.clicked .instruction {
display: block;
}
.container .start-trial {
position: absolute;
height: 20px;
width: 80px;
}
JS:
$("#container").on("click", "#startTrial", function(e) {
e.preventDefault();
$("#container").addClass("clicked");
});
Fiddle: http://jsfiddle.net/qobbkh6f/3/

Try this and let me know if it helps
HTML
<div id="container">
Start Trial
<img class="displays" id="t1_img" src="./images/immi.jpg">
</div>
<div class="instruction" id="instr_1">
<p><b>Instruction:</b><p>
<p>Some text here.</p>
</div>
CSS
#container {
position: relative;
background: grey;
width: 300px;
height: 300px;
margin: 30px;
overflow:hidden
}
.displays {
position: absolute;
top: 0px;
left: 0px;
max-height:100%;
}
Javascript
function StartTrial() {
$('#startTrial').hide();
$('#t1_img').show();
$('#instr_1').show();
}
http://jsfiddle.net/5jx3dn44/

Don't use absolute positioning on your image.
The whole concept of absolute positioning is to make an element overlap the other elements on the page. If you don't want something to overlap other elements then don't use it.
Also don't give a size to your container. It's not the container that's 300x300 and grey - it's your start trial block. If the container is invisible and flexible then it will look good with the image in it when you remove the start trial block. I forget how hide() works but just change to display:none if it doesn't actually remove the element from the layout.

CSS how to fill the entire width?

i already goggle but still don't know what to do
i have 3 div
<body>
<div id="container">
<div id="center"> <h1>center</h1> </div>
<div id="right"> <h1>right</h1> </div>
</div>
</body>
what i try to accomplish
div id=center is auto fill the width
div id=right is in right position of the div id=center, width=200px;
what i try so far
#center{
background-color: green;
float: left;
overflow: auto;
}
#right{
background-color: red;
float: right;
width: 200px;
}
How to make div id=center fill the entire width with another div (div id=right) in right position of it
jsfiddle
forgive my english

If you need a pure CSS Solution, than consider altering your DOM
Demo
First of all, remove float: left; property from #center, and than I've added width: auto; and overflow: hidden; properties which will make the columns independent.
Reference Code :
<div id="container">
<div id="right"></div>
<div id="center"></div>
</div>
#container {
height: auto;
overflow: hidden;
}
#center {
background-color: green;
width: auto;
height: 20px;
overflow: hidden;
}
#right {
background-color: red;
float: right;
height: 20px;
width: 200px;
}

Doesn't work that way - you need to nest the 'right' div inside of the 'center' div:
<body>
<div id="container">
<div id="center">
<h1>center</h1>
<div id="right">
<h1>right</h1>
</div>
</div>
</div>
</body>
Then make the h1 display inline:
h1 {
display: inline-block;
}
#center {
background-color: green;
float: left;
width: 100%;
}
#right {
background-color: red;
float: right;
width: 200px;
}
Here's an updated fiddle.

I got this from here and learnt a new/useful one.
The following solution will not affect your dom in making changes.
#center{
background-color: green;
float: left;
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
}
DEMO

Adding this separate since the other one may be useful to someone in the future. Here's the only CSS only solution I could come up with, but there's a caveat: you have to use percentage based widths on both divs:
#center {
background-color: green;
display: inline-block;
float: left;
width: 80%;
}
#right {
background-color: red;
float: left;
width: 20%;
}
20% should be close to what you need on the smaller div, and you can use media queries if necessary to keep it from being too wide on larger screens.
Here's an updated fiddle.

What can i do is customize your css :
#center{
background-color: green;
position : absolute;
width : 100%;
z-index : -1;
}
#center fill all the empty space between it and #right. but you have to notice it that the #center is behind the #right

Sticky Footer CSS Not working

I've looked at several topics on stackoverflow and other sites, but none of the proposed solutions seem to work for me.
The problem is that no matter what I've tried, I still have a scrollbar added to the page that is the same height as the padding on the top of the container (wrapper) div. I can only make it work by fiddling with the min-height on the container div, which obviously wouldn't always work, and besides, is a really sloppy way to handle it. Here's the code.
HTML:
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
(I've tried the footer inside and outside, with the same results.)
Here's the relevant CSS:
html, body {
height: 100%;
}
body > #container {
height: auto;
min-height: 100%;
}
#content {
height: 100%;
position: relative;
}
body {
margin: 0;
padding: 0;
color: #FFF;
background: /*image here*/;
background-size: cover;
overflow: auto;
}
#container {
width: 100%;
padding-top: 50px;
position: relative;
}
#header {
background: /*image here*/;
height: 130px;
box-shadow: 4px 2px 5px #000;
border-top: 2px solid #F8F8F8;
border-bottom: 2px solid #F8F8F8;
overflow: hidden;
}
#footer {
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
background-color: #FFF;
clear: both;
}
There may be some odd overflows in there, but they've been thrown it at different points trying to fix the problem. I use a background image that covers the entire background of the site, and a background image for the the header.
Any fiddling with the overflows, heights, margin/padding, or relative/absolute/fixed positioning have either yielded worse results, or the same results.
I'm trying to do this without JS, but if all else fails, I'm willing to resort to that. If that's the case, would anyone mind pointing me to a related JS stackoverflow question and/or a tutorial?
Thanks in advance for any advice.

You didn't provide what browser you are trying to do this in, but assuming it is a modern browser, I have found that the cleanstickyfooter technique works the best. (All credit to Trevor Sheridan for this technique.) I have created an example here on JSFiddle so you can see the implementation. You can adjust the widths, etc, as you need to. The first link provides a lot of good detail.
Per SO requirements, here is the HTML:
<body>
<div id="wrapper">
<div id="content_wrapper">
<div id="content_inner_wrapper">
<div>Site content will be contained here.</div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer_inner_wrapper">
<div>The footer's content</div>
</div>
</div>
</body>
and CSS:
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
}
div#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px 0px -41px 0px;
}
div#footer_wrapper {
width: 100%;
height: 41px;
background-color: red;
}
div#content_wrapper {
width: 100%;
padding: 0px 0px 41px 0px;
}
div#footer_wrapper, div#content_wrapper {
min-width: 500px;
}
div#footer_inner_wrapper, div#content_inner_wrapper {
width: 500px;
}