We Keep Coding

How to put a fixed div between header and footer

I would need to make sure that when the page is scrolled the div ".col-left" is placed in the fixed position (it must start from the top ".ctn-parte-iniziale").
Also, when it gets to the bottom of the footer ".bg-orange" it must stop and it must no longer be in the fixed position.
How can I do?
A thousand thanks!
This is my code:
<div class="ctn-parte-iniziale">...</div>
<div id="main-site">
<div class="bg-white">
<div class="container">
<div class="page_layout page_margin_top clearfix cnt-corsi-gen">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-12">
<div class="col-left">
...
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-orange"></div>```

Try adding this to col-left. In 2021 you may not need the webkit line but try it first.
So, in CSS
div.sticky {
position: -webkit-sticky; <!-- Safari/Chrome --->
position: sticky;
top: 0;
}
And then in your HTML
<div class="col-left sticky">

Rotate image on its Y-axis and show different div

I have a form that includes a button (on the left). On the right I have a picture. So when the user clicks the button, I want the picture to have a return around effect and show another div that displays the result. So here is my code:
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
BUTTON
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 calculate__content">
<div class="result__box">
<div class="title">RESULT:</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12"></div>
</div>
</div>
.calculate__content__result {
display: none;
}
So at first, calculate__content__result is not displaying. But when the user clicks the button, the image rotates on its Y-axis with the css effect and calculate__content__result should be shown instead of image. I am also really struggling with rotating its Y-axis with the css animation effect.
Could you please help me?

html need some changes:
add <img> tag inside the result__box.
you should change button type to "button" otherwise the page will refresh every time you click on it.
add a unique class name for the tag that contains the first picture.
add onclick attribute to the button and assign "rotate()" to it.
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="calorie__button__area">
<button
onclick="rotate()"
type="button"
class="button-secondary button__calculate"
>
BUTTON
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content first_image">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 calculate__content">
<div class="result__box">
<div class="title">RESULT:</div>
<img
class = "result_image"
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12"></div>
</div>
</div>
</div>
your initial style should be something like this:
<style>
.calculate__content__result{
display: none;
}
.result_image{
animation: rotation 2s infinite linear;
}
#keyframes rotation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(359deg);
}
}
</style>
and add this script after </body> tag:
<script>
function rotate() {
document.getElementsByClassName("first_image")[0].style.display = "none";
document.getElementsByClassName("calculate__content__result")[0].style.display = "block";
}
</script>

Removing space between columns in html table

I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.

If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?

Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>

Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));

In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>

Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

Masonry: Images stack vertically, one image each row

I am using Masonry in my webpage. The problem is that after the page loaded, all images stack vertically, one image in a row. I would like them to stack both horizontally and vertically. See My Jsfiddle.
I use the following code in html:
<div class="container">
<div id="items">
<!-- the .box repeats several times -->
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
</div>
and the following javascript code:
$(document).ready(function(){
var $container = $('#items');
$container.masonry({
itemSelector: '.box',
isFitWidth: true
});
});
and also the CSS:
.box { margin: 5px; width: 214px; }
.box img { width: 100%; }
.panel .panel-heading {
color: #ffffff;
text-align: center;
margin-right: 0;
height: 150px
}
-------------------- Update ---------------------
The above code is just an abstraction of my webpage, in my first version of fiddle (http://jsfiddle.net/shapeare/saonpswu/), I accidentally put .box into separate #items, therefore, the code didn't work. This problem is pointed out by #Skelly. Thanks, Skelly. Now the fiddle works for the above demo (http://jsfiddle.net/shapeare/saonpswu/1), however, my webpage still cannot work. Now I have put almost the same content as my webpage in the following fiddle:
http://jsfiddle.net/shapeare/saonpswu/2

Fix your HTML so that there aren't separate DIV's with id="items"
<div id="items">
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
<div class="box panel panel-default">
<img src="http://placehold.it/200x150/333333/ffffff">
<div class="panel-body">
name：1<br>
publisher：2
</div>
</div>
</div>
Demo: http://bootply.com/OD2uHuKupr

I forgot to mention that I am using Angular.js which probably caused this problem. I am now using the directive from http://passy.github.io/angular-masonry/ which resolved my problem.