Issues with a JavaScript drop down menu function - javascript

The only problem I have is when you go from one drop down menu title to the next menu drop down title the first one stays open, I have attached the code pen, hopefully that's allowed.
https://codepen.io/gsxr1000/pen/yrGWEd
Edit: The below solutions are great, but they all lose the toggle ablilty of the menu, meaning the menu cant drop down and back up by clicking on the same menu item. This is very important to the functionality of the menu as in some small phones the drop downs could take up most of the screen so they will have no way to close the open dropdowns.
function blockchain() {
var element = document.getElementById("dropone");
element.classList.toggle("mystyle");
}
function products() {
var element = document.getElementById("droptwo");
element.classList.toggle("mystyle");
}
function payments() {
var element = document.getElementById("dropthree");
element.classList.toggle("mystyle");
}
function services() {
var element = document.getElementById("dropfore");
element.classList.toggle("mystyle");
}
window.onclick = function(event) {
if (!event.target.matches('.subnavbtn')) {
var dropdowns = document.getElementsByClassName("subnav-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle')) {
openDropdown.classList.remove('mystyle');
}
}
}
}
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar {
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color: white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.mystyle {
display: block;
}
.subnav:hover .subnav-content {
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn" onclick="blockchain()">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="products()">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="payments()">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="services()">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>


Create a function to close all navigation items;
Call this function when navigation items are clicked or document are clicked.
function blockchain() {
var element = document.getElementById("dropone");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
function products() {
var element = document.getElementById("droptwo");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
function payments() {
var element = document.getElementById("dropthree");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
function services() {
var element = document.getElementById("dropfore");
if (element.classList.contains("mystyle")) {
element.classList.remove("mystyle");
} else {
closeAll();
element.classList.add("mystyle");
}
}
window.onclick = function(event) {
closeAll(event);
}
function closeAll(event = null) {
if (!event || !event.target.matches('.subnavbtn')) {
var dropdowns = document.getElementsByClassName("subnav-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('mystyle')) {
openDropdown.classList.remove('mystyle');
}
}
}
}
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar{
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color:white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover, .subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.mystyle {
display:block;
}
.subnav:hover .subnav-content{
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn" onclick="blockchain()">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="products()">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="payments()">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn" onclick="services()">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>
More simply practice with jQuery:
$('.subnav').on('click', function() {
$('.subnav').not(this).find('.subnav-content').removeClass('mystyle');
$(this).find('.subnav-content').toggleClass('mystyle');
});
$(document).on('click', function(e) {
if (!$(e.target).hasClass('subnavbtn')) {
$('.subnav-content').removeClass('mystyle');
}
});
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar{
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color:white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover, .subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.mystyle {
display:block;
}
.subnav:hover .subnav-content{
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>


A css only solution would make the problem much easier.
The :focus selector selects an element if it is the last one that was clicked.
The :focus-within does the same but also if any child has focus.
The + selects the next sibling, which in your case is a div with the .subnav-content
/*
* When the button is focused this makes it click-through.
* This hast the efect that when the user clicks the button again the click event
* goes through the button and 'hits' the element behind it and so the button looses focus.
*/
.subnavbtn:focus, .subnavbtn:focus-within {
pointer-events: none;
}
.subnavbtn:focus + .subnav-content, .subnavbtn:focus-within + .subnav-content {
display: block;
}
body {
max-width: 1400px;
margin: 0 auto;
padding: 5px;
}
.navbar{
position: relative;
max-width: 700px;
width: 100%;
}
.navbar a {
float: left;
font-size: 16px;
text-align: center;
padding: 5px 0px;
text-decoration: none;
color: black;
}
.navbar a:nth-child(4n+1) {
border-left: px solid #4caf50;
}
.subnav {
box-sizing: border-box;
border-left: 1px solid white;
float: left;
width: 25%;
text-align: center;
background-color: #4caf50;
}
.subnav:last-child {
border-right: ;
}
.subnav:first-child {
border-left: 1px solid #4caf50;
}
.subnav .subnavbtn {
font-size: 16px;
width: 100%;
background-color: #4caf50;
border: none;
outline: none;
color: white;
padding: 10px 1px;
margin: 0;
z-index: 1;
}
.subnav-content {
position: absolute;
display: none;
border: 1px solid #4caf50;
border-top: none;
max-width: 700px;
width: 100%;
left: 0;
text-decoration: none;
background-color: #f4f4f4;
box-sizing: border-box;
}
.subnav-content a {
float: left;
width: 25%;
box-sizing: border-box;
border-left: 1px solid white;
font-size: 12px;
}
.subnav-content a:hover {
color:white;
}
.subnav-content a:nth-child(4n-3) {
border-left: none;
}
.navbar a:hover, .subnav:hover .subnavbtn {
font-weight: bold;
background-color: #2c602e;
}
.subnav:hover .subnav-content{
box-sizing: border-box;
}
#media only screen and (max-width: 500px) {
.subnav-content a {
width: 50%;
}
.subnav .subnavbtn {
font-size: 14px;
}
.subnav-content a:nth-child(2n-1) {
border-left: none;
}
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">Blockchain</button>
<div class="subnav-content" class="drop1" id="dropone">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Products</button>
<div class="subnav-content" class="drop2" id="droptwo">
Bring
Deliver
Package
Express
Bring
Deliver
Package
Bring
Deliver
Package
Express
Bring
Deliver
Package
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Payments</button>
<div class="subnav-content" class="drop3" id="dropthree">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services</button>
<div class="subnav-content" class="drop4" id="dropfore">
Bring
Deliver
Package
Express
</div>
</div>
</div>

Related

Mouse hover over button (Auto Hide & Auto Expand)

I have the code for my html button with CSS everything looks fine, just wanted to modify the button code because it should auto hide when user move away cursor from the button and same when it hover over the button should auto expand, basically it should auto expand and auto reduce and dropdown arrow would add value to it.
I already have code little confusion about adding the above points
The Dropdown arrow key to button,
Auto Expand & reduce on mouse cursor movement over the button),
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

Use onmouseover and onmouseout.
I guess you would like to keep myDropdown open, when you hover it, so I added the onmouseover/onmouseout effect also there.
And JS code is simple:
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("show");
}
function show() {
document.getElementById("myDropdown").classList.add("show");
}
function hide() {
document.getElementById("myDropdown").classList.remove("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onmouseover="show()" onmouseout="hide()" class="dropbtn">SURAH</button>
<div onmouseover="show()" onmouseout="hide()" id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

For the hovering part, you can achiveve it with CSS only:
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
Working example:
.dropbtn {
background-color: #61CE70;
color: blue;
margin: 1px 1px;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
height: 10pxpx;
width: 100px;
text-decoration: none;
}
.dropdown-content {
display: none;
}
.dropbtn:hover + .dropdown-content {
display: block;
}
.dropbtn {
border-radius: 10px;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url(https://search.png);
float: input;
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
color: #fff;
background-color: #086815;
padding: 10px 10px 10px 45px;
border: 1px;
border-radius: 15px;
width: 400px;
text-align-last: max-width;
border-color: #086815;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
text-overflow: ellipsis;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #067B0A4A;
min-width: 400px;
max-height: 550px;
overflow: scroll;
text-align-last: left;
border: 1px solid blue;
border-radius: 15px;
z-index: 1;
}
.dropdown-content a {
color: #fff;
padding: 12px 16px;
width: 390px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #7A7A7A;
}
.show {
display: block;
}
/* ADD CSS */
div#myDropdown a span {
display: inline-block;
float: right;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SURAH</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search your Surah.." id="myInput" onkeyup="filterFunction()">
1.Sureh Al-Fatihah <span>سُوْرَۃُ الفَاتِحَة</span>
2.Sureh Al-Baqarah <span>سُوْرَۃُ الفَاتِحَة</span>
</div>
</div>

html/css gallery div - how to display text in on line

Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
Unfortunately I don't know why but I can't insert all the code.
Here is Currently result:
except result:
Can someone help me set (time + manufacturer name in one line)
and below
(price and add to cart) also in one line?
here is my code:
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
padding: 2px;
text-align: right;
color: black;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
margin-top:5px;
overflow: hidden;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
</style>
<! Produkt 1 -->
<div class="gallery">
<div class="desc1">#BOX1</div>
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png" alt="Cinque Terre" width="800" height="600">
<div class="desc"><div id="clock1">timmer</div><div class="desc3">KARL LAGERFELD</div><div class="desc4">Zestaw 3x Polo</div><div id="pricebox"><s>309,00zł</s> <font color="red">198,00zł</font></div><button class="button button4">Szybki zakup</button></div>
</div>

Adding width:50%; float:left; to each of the first two div elements is one way to solve it. And adding a common class to the second row with width:33%; float:left; puts the second row items together (after moving the button up into the same div as the prior two items).
Also, the font tag and the s element are deprecated. Styling should be done with CSS.
.red { color:red; }
.right { text-align:right; }
.third { display:inline-block; width: 33%; float:left; font-size:1.5em;}
.strike { text-decoration:line-through; }
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 480px;
}
#media only screen and (max-width: 600px) {
div.gallery {
margin: 8px;
border: 1px solid #ccc;
float: center;
width: 370px;
}
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc1 {
padding: 10px;
text-align: center;
color: black;
}
div.desc2 {
font-size: 14px;
text-align: center;
color: black;
}
div.desc3 {
font-size: 18px;
text-align: right;
color: black;
width:50%;
float:right;
}
div.desc4 {
font-size: 16px;
text-align: right;
color: grey;
}
#clock1 {
text-align: left;
font-size: 18px;
color: black;
overflow: hidden;
width:50%;
float:left;
}
#pricebox {
text-align: left;
font-size: 20px;
color: black;
margin-top:20px;
overflow: hidden;
white-space: nowrap;
}
.button {
background-color: #d03a0a; /* Green */
border: none;
color: white;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button4 {border-radius: 16px;}
<div class="gallery">
<div class="desc1">#BOX1</div>
<a href="img_5terre.jpg" target="_blank" rel="noopener">
<img src="https://underbox.pl/pub/media/wysiwyg/tshirt_karl.png"
alt="Cinque Terre" width="800" height="600">
</a>
<div class="desc">
<div id="clock1">timer</div>
<div class="desc3">KARL LAGERFELD</div>
<div class="desc4">Zestaw 3x Polo</div>
<div id="pricebox">
<span class="third strike">309,00zł</span>
<span class="red third">198,00zł</span>
<span class="third right"><button class="button button4">Szybki zakup</button></span>
</div>
</div>
</div>

Content Editable not saving with localStorage

I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom

You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});

You are using the id "editable" twice, could you change that and retry?

<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()

how to move buy button underneath drop down box?

I am trying to move a button underneath the drop down box in my product page. so that the information is presented with one information per row. I tried placing a div tag around the button to see if that be seen as a separate element that goes below the previous element but that did not work so I am lost in what to do to make the buy button to go underneath the size and 1 boxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" >
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<br>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
*{
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
padding: 0;
border: 0;
}
h1{
font-size: 130%;
}
h2{
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p{
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product{
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2{
width: 100%;
height: 100%;
float: left;
}
.product-image{
/*border: 1px dotted #aaa;*/
}
.product-image .bg{
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator{
text-align:center;
}
.dot:hover{
background-color: #444;
}
.product-info{
padding: 0px 8%;
}
.product-info h1{
margin-bottom: 5px;
}
.product-info h2{
margin-bottom: 50px;
}
.product-info .select-dropdown{
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select{
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active, select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn{
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover{
background-color: #555;
}
.product-info p{
margin-bottom: 30px;
}
.product-info p a{
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover{
opacity: .7;
}
.product-info ul{
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li{
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before{
content:"\2022";
margin-right: 20px;
}
.product-info a.share-link{
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover{
border-bottom: 2px solid #aaa;
}
#footer {
width:100%;
background-color:#222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear:both;
height:10%;
}

There are multiple things wrong here.
The <br> tag should not be used for element positioning. This should be strictly reserved for text.
If you don't want your elements to display a line, it's probably a good idea to not set their display property to an inline-block for starters.
There are even some syntactical errors (eg. excessive </div> tag and what not). In general, I'd recommend writing your code in some sort of linter as it has some readability issues.
I did the baremost minimum of removing the unnecessary <br> tag and added clear:both to the .Buy class formatting. Producing the desired result.
body {
margin: 0;
padding: 0;
border: 0;
background-color: #eee;
font-family: "Helvetica", sans-serif;
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 130%;
}
h2 {
color: #aaa;
font-size: 18px;
font-weight: 400;
}
p {
font-size: 12px;
line-height: 1.5;
}
/*.wrapper{
padding: 20px 0px;
}*/
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
nav.black .logo {
color: #fff;
}
nav.black ul li a {
color: #fff;
}
.menu-text {
color: #000;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.Buy {
clear: both;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
#space {
width: 100%;
height: 86px;
}
.product {
background-color: #eee;
border-bottom: 1px solid #ddd;
clear: both;
padding: 0px 10% 70px 10%;
}
.group:after {
content: "";
display: table;
clear: both;
}
.col-1-2 {
width: 100%;
height: 100%;
float: left;
}
.product-image {
/*border: 1px dotted #aaa;*/
}
.product-image .bg {
background-image: url('images/slider-1.jpg');
background-size: cover;
background-position: center top;
min-height: 550px;
}
.product-image .indicator {
text-align: center;
}
.dot:hover {
background-color: #444;
}
.product-info {
padding: 0px 8%;
}
.product-info h1 {
margin-bottom: 5px;
}
.product-info h2 {
margin-bottom: 50px;
}
.product-info .select-dropdown {
display: inline-block;
margin-right: 10px;
position: relative;
width: auto;
float: left;
}
.product-info select {
cursor: pointer;
margin-bottom: 20px;
padding: 12px 92px 12px 15px;
background-color: #fff;
border: none;
border-radius: 2px;
color: #aaa;
font-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select:active,
select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: " ";
cursor: pointer;
position: absolute;
top: 30%;
right: 10%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #aaa;
}
.product-info a.add-btn {
background-color: #444;
border-radius: 2px;
color: #eee;
display: inline-block;
font-size: 14px;
margin-bottom: 30px;
padding: 15px 100px;
text-align: center;
text-decoration: none;
transition: all 400ms ease;
}
a.add-btn:hover {
background-color: #555;
}
.product-info p {
margin-bottom: 30px;
}
.product-info p a {
border-bottom: 1px dotted #444;
color: #444;
font-weight: 700;
text-decoration: none;
transition: all 400ms ease;
}
.product-info p a:hover {
opacity: .7;
}
.product-info ul {
font-size: 12px;
padding: 0;
margin-bottom: 50px;
}
.product-info li {
list-style-type: none;
margin-bottom: 5px;
}
.product-info li::before {
content: "\2022";
margin-right: 20px;
}
.product-info a.share-link {
color: #aaa;
font-size: 11px;
margin-right: 30px;
text-decoration: none;
}
.product-info a.share-link:hover {
border-bottom: 2px solid #aaa;
}
#footer {
width: 100%;
background-color: #222;
padding: 60px 0px;
position: relative;
bottom: 0;
clear: both;
height: 10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="bike-1-style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="Menu">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li><a class="menu-text" href="index.html">Home</a></li>
<li><a class="menu-text" href="location.html">Location</a></li>
<li><a class="menu-text" href="shop.html">Shop</a></li>
<li><a class="menu-text" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
<div id="space"></div>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet">
<div class="wrapper">
<div class="product group">
<div class="col-1-2 product-image">
<div class="bg"></div>
<div class="indicator">
</div>
</div>
<div class="col-1-2 product-info">
<h1>Field Notes Cherry Graph 3-Pack</h1>
<h2>$877.50</h2>
<div class="select-dropdown">
<select>
<option value="size">Size</option>
<option value="size">Small</option>
<option value="size">Medium</option>
<option value="size">Large</option>
</select>
</div>
<div class="select-dropdown">
<select>
<option value="quantity">1</option>
<option value="quantity">2</option>
<option value="quantity">3</option>
<option value="quantity">4</option>
</select>
</div>
<div class="Buy"></div>
Buy
</div>
<ul>
<li>Graph paper 40-page memo book.</li>
<li>3 book per pack. Banded and shrink-wrapped</li>
<li>Three great memo books worth fillin' up with information</li>
<li>Red cherry wood covers</li>
</ul>
</div>
</div>
<div id="footer"></div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {
plusSlides(1)
}, 1000)
})
// Scrolling Effect
$(window).on("scroll", function() {
if ($(window).scrollTop()) {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>

You have <br/> tag before button, just add style to it like this
<br style="clear: both;" />
and you should be fine :)

Footer Does Not Fixed at The Below of Page

Here, I would like to fix my footer at the below of the page. I cannot seem to do it for this page whereas the css codes for footer works well on the other pages. Again, I would like to place the footer fixed at the below of the page.
Need help on this.
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();
body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
#media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
#media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
<ul>
<li>Home</li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
Conduct Study
Reports
</div>
</li>
<li>Contact</li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<!--Product List for PCR Legacy-->
<br><br>
<!--End of first drop down list-->
</select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div>
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>

See the snippet below. This will force the footer to be on the bottom of the page only if the content isn't high enough.
See the answer of Staale # How do you get the footer to stay at the bottom of a Web page?
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();
/* --- This below --- */
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -62px;
/* the bottom margin is the negative value of the footer's height */
}
.push {
height: 62px;
/* .push must be the same height as .footer */
}
/* --- This ahead --- */
body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
#media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
#media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}
<div class="wrapper"> <!-- START: Wrap everything in this div -->
<ul>
<li>Home</li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
Conduct Study
Reports
</div>
</li>
<li>Contact</li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
<!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<!--Product List for PCR Legacy-->
<br><br>
<!--End of first drop down list-->
</select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
</select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div class="push"></div> <!-- START & END: Push div -->
</div> <!-- END: Wrap everything in this div -->
<div class="footer"> <!-- START: Footer WITH class -->
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div> <!-- END: Footer WITH class -->

Please use following css to make footer stick at bottom:
footer {
/*it will allow to scroll page while staying at top incase page is long*/
position: fixed;
bottom: 0;
width: 100%;
}
JSFIDDLE
Additionally if you don't want this behavior you do this to make footer stick at bottom always.
footer {
position: absolute;
bottom: 0;
width: 100%;
}

Categories

Resources