We Keep Coding

CSS HTML parallax scrolling on 3 columns - desktop

I have 3 columns defined as left, middle and right. I am trying to make it work so these columns does not disappear from screen and the scrollbar can scroll until the end of each column height.
Here is some test code:
* {
box-sizing: border-box;
}
body {
padding: 30px;
margin: 0px;
}
.left {
position: relative;
padding: 20px;
width: 20%;
float: left;
height: 1000px;
margin-right: 1%;
border: 2px solid;
}
.middle {
position: relative;
padding: 20px;
width: 49%;
float: left;
margin-right: 1%;
border: 2px solid;
height: 2000px;
}
.right {
position: relative;
padding: 20px;
width: 29%;
float: left;
border: 2px solid;
height: 1500px;
}
div:after {
position: absolute;
content: 'end';
bottom: 10px;
left: 10px;
}
<div class="left">left</div>
<div class="middle">midle</div>
<div class="right">right</div>

Shifting middle div to left leaves white space on its right

I have three div elements inside a wrapper-div as below:
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
I have applied below CSS on these which makes them appear side by side in the same row.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
Now I want middle div to appear as a superscript to the text in left div. To achieve it I apply below CSS to the middle-div.
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: relative;
left: -45px;
top: -5px;
}
This makes the middle-div appear as a superscript to the left-div however it leaves an undesired white space in middle-div's original position.
Could you please help me with fixing it.
Note: In my original problem I have an uncontrolled variable number of divs where I want every second div to act as a superscript to its previous div.

Set the wrapper to position: relative; and display: flex;
then you can simply set the middle div to absolute as below when you want it to do the superscript effect.
.wrapper-div {
display: flex;
position: relative;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
background-color: red;
position: relative;
margin-right: 0;
}
.middle-div {
display: block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 25px;
top: 2px;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>

If you can't change the div structure (put the middle inside the left), you could put the wrapper in position:relative and the middle div in position:absolute instead.
It will give :
.wrapper-div {
display: inline-block;
position:relative;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
margin-right: 10px;
background-color: green;
font-size: 8px;
position: absolute;
left: 20px;
top: 2px;
}
Here is a Codepen: https://codepen.io/anon/pen/ePrMqv

I believe it would be more correct (and also give you less headaches) to have the "superscript" divs as subdivs like this:
<div class="left-div">
Hi
<div class="middle-div">
Hello
</div>
</div>
This would be both easier to read in code and easier to control with regard to positioning.

Don't use positioning: use negative margin.
.wrapper-div {
display: inline-block;
}
.left-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: red;
}
.middle-div {
display: inline-block;
width: 20px;
height: 10px;
background-color: green;
font-size: 8px;
margin-left: -35px;
margin-right: 0;
vertical-align: top;
}
.right-div {
display: inline-block;
width: 50px;
height: 20px;
margin-right: 10px;
background-color: blue;
}
<div class="wrapper-div">
<div class="left-div">
Hi
</div>
<div class="middle-div">
Hello
</div>
<div class="right-div">
Bye
</div>
</div>
Codepen of the difference between positioning / transform / negative margin

How can I put this make this box go below the text like in the image

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>

Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/

You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}

How to make a simple HTML CSS Time diagram

I am trying to create a time diagram which displays lab usage time using HTML CSS divs. I put something together, but it is not turning out as well as I thought.
div {
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 70%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.bringUp {
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
Actual Time Used
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>
What I am trying to achieve is creating a block of "actual" time which is made up of several blocks in line (Bringup, idle, lost, used). I also need to create another block which can move inside or outside of the actual time block to represent allotted time. The behavior is very similar to a stack bar chart, but not quite the same. The widths are hard coded in the CSS above, but the idea is the values would be based upon user input.
Any advice to achieve this would be great!

You could do it like that:
Set margins that are inherited from the parent to 0
Set heights manually is the easiest way in this case
Place "Actual Time Used" in a absolute positioned span
div {
box-sizing: border-box;
height: 30px;
margin-top: 20px;
}
.alloted {
background-color: blue;
border: 2px solid black;
text-align: left;
height: 80px;
width: 100%;
position: absolute;
opacity: 0.5;
}
.actual {
opacity: 0.6;
background-color: gray;
border: 2px solid black;
text-align: left;
height: 60px;
width: 65%;
margin-left: 2%;
margin-top: 40px;
position: absolute;
}
.actual span {
position: absolute;
bottom: 20px;
right: 50%;
}
.bringUp {
margin: 0;
height: 58px;
background-color: orange;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.idle {
margin: 0;
height: 58px;
background-color: brown;
border: 2px solid black;
text-align: left;
width: 10%;
display: inline-block;
float: left;
}
.lost {
margin: 0;
height: 58px;
background-color: red;
border: 2px solid black;
text-align: left;
width: 5%;
display: inline-block;
float: left;
}
.used {
margin: 0;
height: 58px;
background-color: green;
border: 2px solid black;
text-align: left;
width: 55%;
display: inline-block;
float: left;
}
<div class="actual">
<span>Actual Time Used</span>
<div class="bringUp">
Bring Up
</div>
<div class="idle">
Idle
</div>
<div class="lost">
Lost
</div>
<div class="used">
Used
</div>
</div>
<div class="alloted">
Alloted Lab Shot
</div>

Overlap page container border with a floating div border

I'm trying to make a tab float vertically in a page with dynamic generated content and overlap the right border the page content container with the left border of the floating div.
Here is a representation of what I'm trying to achieve:
In the following fiddle there's a basic skeleton of my page and an example of what is happening.
jsFiddle here
If I add position: absolute to this class the floating tab is correctly positioned but the page will not grow correctly as the content is appended nor will the footer be correctly positioned. On the other hand, if I remove the position absolute then the tab is not correctly positioned.
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
/*position: absolute;*/
}
How can I place the floating tab correctly overlapping the container border?
Notes: I cannot change much of the page structure (wrapping div and footer) but if needs be, the floating div can be appended after the #inner div.

Try this FIDDLE
Just add this rules to your .floating-tab:
margin-left: -1px;
z-index: 999;
float: left;
and float: left to your selector #page-content

Something like this:
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative; /* positoning context */
}
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%; /* fully left */
margin-left: 1px; /* width of border */
z-index:2;
}
$(function($) {
var element = $(".floating-tab"), originalY = element.offset().top, topMargin = 10;
$(window).on("scroll", function(event) {
var scrollTop = $(this).scrollTop();
element.stop(false, false).animate({ top: scrollTop < originalY ? topMargin : scrollTop - originalY + topMargin }, 300);
});
$("#B1").on("click", function() {
$("#innercontent").append("<p>text 1</p><p>text 2</p><p>text 3</p><p>text 4</p><p>text 5</p><p>text 6</p><p>text 7</p><p>text 8</p><p>text 9</p><p>text 10</p>");
});
});
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%;
margin-left: 1px;
z-index:2;
}
.floating-tab span
{
width: 24px;
height: 24px;
margin: 2px;
}
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
}
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative;
}
#outer
{
width: 100%;
padding-top: 10px;
display: block;
text-align: center;
}
#footer
{
margin-top: 17px;
background-color: lightblue;
border-top: 1px solid gray;
height: 48px;
}
#pagewrapper
{
min-height: 100%;
margin-bottom: -66px;
}
html, body, form
{
height:100%;
}
html
{
overflow: initial !important;
}
*, *::after, *::before
{
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrapper">
<div id="outer">
<div id="inner">
<div id="page-content">
<input type="button" value="add content" id="B1" />
<div id="innercontent"></div>
</div>
<div class="floating-tab">
<span>A</span>
<span>B</span>
<span>C</span>
<div>
</div>
</div>
</div>
<div id="footer">FOOTER</div>