I need help making it so when I shrink the width of my browser that it will be responsive and my navbar links will appear under my navbar title. Can someone help me out with trying to get this done.
I believe that I will need to use a flexbox to do this. I've been trying a few different ways, but cant seem to get the links in pagetitle id and the nav id to appear vertically.
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content (content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
position: fixed;
padding-right: 10rem;
top: 0px;
right: 0px;
text-align:right;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
Home
Services
About Us
Contact
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>
Here is the updated css file. Used flex box in the #titleNav and #nav.
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1;
width: 100vw;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav { /* fix the nav bar */
display: flex;
flex-wrap: wrap;
font-size:24px;
padding-bottom: 12px;
padding-top:32px;
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
You can look into position: sticky; which I think would work better for you example, but to keep it simple I stuck to just correcting your CSS...
Set #content padding-top: 100px or close to 100px and remove the positioning and padding from #nav so it looks like:
#nav {
text-align: right;
font-size: 24px;
overflow: hidden; /*when content to big to fit in area */
}
html, body {
margin:0;
padding:0;
}
body {
background-color: #AC876A; /* this is the turqoise color */
color: black; /* color of font */
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
font-size:16px;
}
#titleNav { /* titleNav is fixed, always at the top */
/* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
position:fixed;
top:0px;
left:0px;
z-index: 1; /* To make sure titleNav is on top of content, give it a higher z-index than content (content would have default value of zero). */
width: 100%;
background-color:rgb(71, 39, 14);
padding-bottom: 10px;
/* height: 86px; /* NEW */
color: burlywood;
font-family: serif;
font-weight: bold;
border-bottom: 1px solid #68615D;
}
#pageTitle { /* no change */
padding:12px;
padding-bottom: 0px;
font-size:48px;
letter-spacing: 1.5px; /* spaces out letters a bit */
}
#nav {
text-align:right;
font-size:24px;
overflow: hidden; /*when content to big to fit in area */
}
#nav a { /* no change */
text-decoration:none; /* Do not want links in "nav" to be underlined */
color: #C8C8C8; /* light gray: to provide color for links, you have to style the "a" tag */
float: left;
padding-left: 16px;
padding-right: 16px;
}
#nav a:hover{
background-color: #ddd;
color: black;
}
#nav a.active{
border-bottom: 2px solid black;
}
#content { /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */
padding:12px;
padding-top: 100px; /* prevent the top of the content from getting hidden under the fixed titleNav */
padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}
#footer { /* footer fixed, always at the bottom */
position: fixed;
bottom: 0px;
left: 0px;
z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */
background-color:rgb(71, 39, 14);
color: burlywood;
width:100%;
text-align:center;
padding:8px;
}
<!DOCTYPE html><html>
<!-- Use this type of comment within HTML -->
<title>U-Bin Moving</title>
<!-- this is your internal style sheet -->
<link href="style/myStyle.css" rel="stylesheet">
<div id="titleNav">
<div id="pageTitle">
U-Bin Moving
</div>
<div id="nav">
Home
Services
About Us
Contact
</div>
</div>
<div id="content">
<h2>The Right Moving Company For You</h2>
<p>
At U-Bin Storage we will get the job done for the lowest price.
</p>
<p style="text-align:center;">
<img src="pics/box.jpg" style="width:50%; border-radius:10px;">
</p>
</div> <!-- content. [[Keep track of nesting]] -->
<div id="footer">
[ Kyle Hrivnak ]
</div>
Related
I'm trying to make a horizontal navigation bar that has some menu items in a browser but condenses down to a hamburger menu if used on a mobile or other smaller device. I've been having a lot of trouble with actually removing the menu items and adding them to the hamburger menu. Any help would be greatly appreciated.
sample HTML:
<div class="navbar">
First Name
Projects
Resume
About
</div>
sample CSS:
.navbar {
overflow: hidden;
background-color: #ECECEC;
width:100vw;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
border-bottom: 1px solid black;
}
/* Links inside the navbar */
.navbar a {
float: left;
display: flex;
color: #474243;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 150%;
font-family: 'Roboto', sans-serif;
}
.navbar a:nth-of-type(1) {
/* padding-right: 680px; */
color: black;
margin-right: 680px;
padding-left: 50px;
/*background: #777; */
font-size: 200%;
font-family: 'Roboto', sans-serif;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
#media (max-width: 952px){
navbar a{
font-size: 16px;
}
}
You can use the #media query. Here's some examples and guidelines
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I would like to move the circular image of myself located in the sidebar up and in line with my name displayed in the header. The contact and tech skills sections might need adjusting as well.
I have learned about absolute versus relative and how it relates to this, but I just can't implement a working solution.
This is what I have been working with:
<div style="position:relative; height:60px;">
<img src="profile_pic_circular.png"
style="position:absolute; top:-10px; left:-30px; width:80px; height:80px; border:none;"
alt="profile"
title="profile photo" />
</div>
Link to my resume with picture.
Code:
#import url("https://fonts.googleapis.com/css?family=Montserrat|Playfair+Display&display=swap");
/* Main text is monserrat*/
body {
font-family: "Montserrat", sans-serif;
font-weight: 300;
line-height: 1.3;
color: #444;
}
/* Give headers playfair font */
h1,
h2,
h3 {
font-family: "Playfair Display", serif;
color: #000;
}
/* When in PDF export mode make sure superscripts are nice and small and italic */
sup {
font-size: 0.45rem;
font-style: italic;
}
/* Avoid the breaking within a section */
.blocks {
break-inside: avoid;
}
* {
/* Override default right margin for sidebar*/
--pagedjs-margin-right: 0.2in;
--pagedjs-margin-left: 0.2in;
}
/* Customize some of the sizing variables */
:root {
--sidebar-width: 12rem; /* Shrink sidebar width */
--sidebar-background-color: #f7fbff; /* Make sidebar blue */
--sidebar-horizontal-padding: 0.01in; /* Reduce sidebar padding */
--decorator-outer-dim: 10px; /* Make position deliniating circles larger */
--decorator-border: 2px solid #bdd7e7; /* Make timeline a blue as well*/
}
.details .place {
margin-top: 0.25rem;
}
.main-block:not(.concise) .details div {
padding-top: 0.009rem;
}
/* Laptop icon isn't centered by default which is lame */
.fa-laptop {
margin-left: -3px;
}
/* When we have links at bottom in a list make sure they actually are numbered */
#links li {
list-style-type: decimal;
}
/* Dont put the little fake list point in front of links */
.aside li::before {
display: none;
}
/* Move closer to start and up towards header */
.aside ul {
padding-left: 1rem;
}
.aside li::before {
position: relative;
margin-left: -4.25pt;
content: "• ";
}
/* Make sure elements in asside are centered and have a nice small text */
.aside {
width: calc(var(--sidebar-width) + 9px);
line-height: 1.2;
font-size: 0.75rem;
}
/* Make little circle outline be a light blue */
.decorator::after {
background-color: #08306b;
}
/* Remove the fake bullets from lists */
.aside li::before {
content: auto;
}
.skill-bar {
color: white;
padding: 0.1rem 0.25rem;
margin-top: 3px;
position: relative;
width: 100%;
}
/* When the class no-timeline is added we remove the after psuedo element from the header... */
/* Removes the psuedo element on h2 tags for this section */
.section.no-timeline h2::after {
content: none;
}
/* Without adding padding the content is all up on the title */
.section.no-timeline h2 {
padding-bottom: 1rem;
}
/* Add styles for little cards */
.info-card{
width: 220px;
float: left;
padding: 0.5rem;
margin: 0.5rem;
box-shadow: 1px 1px 4px black;
}
I inspected the sidebar (right-click, choose Inspect) and saw that .aside had a padding. Remove it to align your picture with your headline.
padding: 0.6in var(--sidebar-horizontal-padding)
I wonder why an update of the following CSS properties: width , position does not enlarge the vertical nav bar on my page.aspx.
As an illustration, please find below the CSS:
/* The sidebar menu */
.sidenav {
/*height: 100%;*/ /* Full-height: remove this if you want "auto" height */
width: 300px; /* Set the width of the sidebar */
/*position: fixed;*/ /* Fixed Sidebar (stay in place on scroll) */
position: absolute;
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
/*background-color: #111*/; /* Black */
background-color: #eee;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 50px;
font-family: 'Segoe UI Historic';
font-size: 19px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
/*font-size: 25px;*/
font-size: 19px;
color: #818181;
display: block;
font-family: 'Segoe UI Historic';
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
/*color: #f1f1f1;*/
/*color: #2196F3;*/
color: #1912e3;
font-family: 'Segoe UI Historic';
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
font-family: 'Segoe UI Historic';
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
body {
font-family: "Segoe UI Historic";
}
A feedback would highly be appreciated.
Randomly, based on an "trial and error" approach, I have empirically found out that
substituting in the CSS the property width:300px by width:20% did work. Thus I would appreciate to know, if possible, a rationale behind such random discovery.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am new in website development and needed some help with browser size. When I am on fullscreen on Safari, my code works just fine. However, when I shrink my browser's size, the elements overlap on each other.
I tried using this wrapper as it works on my previous site and it worked but it doesn't work in this site.
wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
Below is the code for the current site I am working on.
Please ignore the comments added on it.
My Snippet:
/*********** Color Palette ***********/
.dark-primary-color {
background: #F57C00;
}
/* Darker Orange */
.default-primary-color {
background: #FF9800;
}
/* Lighter Orange */
.light-primary-color {
background: #FFE0B2;
}
/* Peach Orange */
.accent-color {
background: #448AFF;
}
/* Blue */
.primary-text-color {
color: #212121;
}
/* Black */
.secondary-text-color {
color: #727272;
}
/* Grey */
.divider-color {
border-color: #B6B6B6;
}
/* Light Grey */
/*********** General ***********/
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
body {
/* This is the CSS for body */
overflow: hidden;
/* Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%;
/* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%;
/* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif;
/* Font used in body is Montserrat */
line-height: 1.5em;
/* Line spacing is set to 1.5em */
font-size: 18px;
/* Font size set to 18px */
}
hr {
/* This is the CSS for horizontal line */
border-color: #F57C00;
/* Color of horizontal line is dark orange */
}
h1 {
/* This is the CSS for Header 1 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 1 is Montserrat */
font-size: 70px;
/* Font size set to 70px */
font-weight: 500;
/* Font weight is set to 500 */
}
h2 {
/* This is the CSS for Header 2 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 2 is Montserrat */
font-size: 60px;
/* Font size set to 60px */
font-weight: 500;
/* Font weight is set to 500 */
}
h3 {
/* This is the CSS for Header 3 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 3 is Montserrat */
font-size: 50px;
/* Font size set to 50px */
font-weight: 500;
/* Font weight is set to 500 */
}
h4 {
/* This is the CSS for Header 4 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 4 is Montserrat */
font-size: 40px;
/* Font size set to 40px */
font-weight: 500;
/* Font weight is set to 500 */
}
p {
/* This is the CSS for Paragraph */
font-family: 'Montserrat', sans-serif;
/* Font used in paragraph is Montserrat */
font-size: 18px;
/* Font size is set to 18px */
font-weight: 400;
/* Font weight is set to 400 */
}
/*********** Header ***********/
#header {
/* This is the CSS for header */
position: absolute;
/* Position is set to absolute */
top: 0;
/* Top is set to 0. There is no spacing between the header and the top of the browser */
left: 0;
/* Left is set to 0. There is no spacing between the header and the left of the browser */
width: 100%;
/* Width is set to 100%. The width will stretch from the browser's left to the right */
height: 50px;
/* Height is set to 50px. The height of the header is 50pixels tall */
overflow: hidden;
/* Overflow is set to hidden. Any elements outside of the header will not be shown. No scrollbar will be added */
background: #F57C00;
/* Background color is set to dark orange */
}
.headerlogo {
/* This is the CSS for headerlogo */
position: absolute;
/* Position is set to absolute */
float: left;
/* Element will float to the left */
top: 13px;
/* Top is set to 13px. The spacing between the top of the parent and the headerlogo is 13pixels */
max-height: 40px;
/* Maximum height of headerlogo is 40px */
width: auto;
/* The width is set to auto. It will align proportionally to the height */
margin-left: 70px;
/* The spacing at the left outside of headerlogo is 70px */
font-family: 'Merienda', cursive;
/* Font used for headerlogo is Marienda */
font-size: 30px;
/* Font size used is 30px */
color: white;
/* Color of the headerlogo is set to white */
text-decoration: none;
/* */
}
header ul {
/* This is the CSS for header unordered list */
list-style-type: none;
/* */
margin: 0;
/* Margin is set to 0 */
padding: 0;
/* Padding is set to 0 */
display: inline;
/* */
}
header ul a {
/* This is the CSS for header unordered a? */
display: block;
float: right;
}
header ul li a {
display: block;
margin: 0 0 0 30px;
padding: 10px 20px;
background: transparent;
color: white;
text-decoration: none;
line-height: 0.2px;
}
header ul li a:hover {
background: transparent;
color: #727272;
opacity: 0.8;
}
.innertubeheader {
margin: 15px;
margin-right: 70px;
}
/*********** Main ***********/
main {
position: fixed;
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
}
.innertube {
margin: 15px;
}
.innertubeimg {
margin: 0.1px;
position: relative;
}
.jumbo {
z-index: 200;
position: absolute;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
.jumboh1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 70px;
color: white;
}
.jumbop {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
color: white;
}
.container {
width: 80%;
margin: auto;
padding-left: 70px;
padding-right: 70px;
}
p {
color: #212121;
}
.colwrap {
position: relative;
float: left;
left: 0;
width: 100%;
}
.colleft {
position: relative;
float: left;
left: 0;
width: 46%;
padding-right: 5px;
}
.colright {
position: relative;
float: right;
right: 0;
width: 46%;
padding-left: 5px;
}
img {
max-width: 100%;
height: auto;
}
/*********** Footer ***********/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
overflow: hidden;
background: #F57C00;
}
footer p {
color: white;
line-height: 10px;
}
.innertubefooter {
margin: 15px;
margin-left: 70px;
}
/* Right Navigation */
#nav {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
width: 00px;
overflow: auto;
background: #444;
}
.navlogo {
float: left;
max-height: 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home | Pincello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="wrapper">
<header id="header">
<div class="innertubeheader">
Pincello
<ul>
<li>
Support
</li>
<li>
Higeo
</li>
<li>
About Pincello
</li>
<li>
Products
</li>
</ul>
</div>
</header>
</div>
<main>
<div class="innertubeimg">
<div class="jumbo">
<h1 class="jumboh1">T E R R A ' S F I N E S T</h1>
<hr style="width:30%">
<p class="jumbop">P H O N E S | T A B L E T S | L A P T O P S</p>
</div>
<img alt="SJ" src="012_ISC_2012_Monday_IZ3A1945.jpg">
</div>
<div class="innertube">
<div class="container">
<h3 style="text-align:center; font-size:18px; color:#F57C00">Who we are?</h3>
<h3 style="text-align:center">THE MASSIVE PROJECT</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>What is Pincello?</b>
<hr>
<br>Pincello is the leading brand of today's generation when it comes to technology.
<br>
<br>We <b>NEVER</b> felt tired being a leader.
<br>
<br>As a leader, we strongly abide to our <b>Vision and Mission</b>.
<br>
<br>
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>Vision and Mission</b>
<hr>
<br><b>VISION:</b>
<br>To lead the current generation in the world of Information Technology.
<br>
<br><b>MISSION:</b>
<br>For the people, By the people.
<br>
<br>
<br>
<br>
</p>
</div>
</div>
<br>
<hr>
<br>
<h3 style="text-align:center; font-size:18px; color:#F57C00">Our Partner</h3>
<h3 style="text-align:center">HIGEO</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLLSHIT
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLSHIT
<br>
<br>
</p>
</div>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="innertubefooter">
<p class="text-left">Copyright 2015 Pincello. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Maybe this is what you are after. This approach will make the body's minimum width to a fixed value, so that when you re-size the window, the elements won't be overlap. You will have to scroll horizontally to see the entire page.
In case if you want to make the entire website responsive, it is better to use a framework like bootstrap, as you have complex positioning of elements
Change your body styles to this,
body { /* This is the CSS for body */
position: relative;
min-width: 900px;
/*overflow: hidden; Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%; /* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%; /* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif; /* Font used in body is Montserrat */
line-height: 1.5em; /* Line spacing is set to 1.5em */
font-size: 18px; /* Font size set to 18px */
}
and main styles to this,
main {
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
min-width: 900px;
}
Below is the snippet to demonstrate the result
/*********** Color Palette ***********/
.dark-primary-color {
background: #F57C00;
}
/* Darker Orange */
.default-primary-color {
background: #FF9800;
}
/* Lighter Orange */
.light-primary-color {
background: #FFE0B2;
}
/* Peach Orange */
.accent-color {
background: #448AFF;
}
/* Blue */
.primary-text-color {
color: #212121;
}
/* Black */
.secondary-text-color {
color: #727272;
}
/* Grey */
.divider-color {
border-color: #B6B6B6;
}
/* Light Grey */
/*********** General ***********/
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
min-width: 960px;
height: 100%;
}
body {
/* This is the CSS for body */
position: relative;
min-width: 900px;
/*overflow: hidden; Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%;
/* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%;
/* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif;
/* Font used in body is Montserrat */
line-height: 1.5em;
/* Line spacing is set to 1.5em */
font-size: 18px;
/* Font size set to 18px */
}
hr {
/* This is the CSS for horizontal line */
border-color: #F57C00;
/* Color of horizontal line is dark orange */
}
h1 {
/* This is the CSS for Header 1 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 1 is Montserrat */
font-size: 70px;
/* Font size set to 70px */
font-weight: 500;
/* Font weight is set to 500 */
}
h2 {
/* This is the CSS for Header 2 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 2 is Montserrat */
font-size: 60px;
/* Font size set to 60px */
font-weight: 500;
/* Font weight is set to 500 */
}
h3 {
/* This is the CSS for Header 3 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 3 is Montserrat */
font-size: 50px;
/* Font size set to 50px */
font-weight: 500;
/* Font weight is set to 500 */
}
h4 {
/* This is the CSS for Header 4 */
font-family: 'Montserrat', sans-serif;
/* Font used in header 4 is Montserrat */
font-size: 40px;
/* Font size set to 40px */
font-weight: 500;
/* Font weight is set to 500 */
}
p {
/* This is the CSS for Paragraph */
font-family: 'Montserrat', sans-serif;
/* Font used in paragraph is Montserrat */
font-size: 18px;
/* Font size is set to 18px */
font-weight: 400;
/* Font weight is set to 400 */
}
/*********** Header ***********/
#header {
/* This is the CSS for header */
position: absolute;
/* Position is set to absolute */
top: 0;
/* Top is set to 0. There is no spacing between the header and the top of the browser */
left: 0;
/* Left is set to 0. There is no spacing between the header and the left of the browser */
width: 100%;
/* Width is set to 100%. The width will stretch from the browser's left to the right */
height: 50px;
/* Height is set to 50px. The height of the header is 50pixels tall */
overflow: hidden;
/* Overflow is set to hidden. Any elements outside of the header will not be shown. No scrollbar will be added */
background: #F57C00;
/* Background color is set to dark orange */
}
.headerlogo {
/* This is the CSS for headerlogo */
position: absolute;
/* Position is set to absolute */
float: left;
/* Element will float to the left */
top: 13px;
/* Top is set to 13px. The spacing between the top of the parent and the headerlogo is 13pixels */
max-height: 40px;
/* Maximum height of headerlogo is 40px */
width: auto;
/* The width is set to auto. It will align proportionally to the height */
margin-left: 70px;
/* The spacing at the left outside of headerlogo is 70px */
font-family: 'Merienda', cursive;
/* Font used for headerlogo is Marienda */
font-size: 30px;
/* Font size used is 30px */
color: white;
/* Color of the headerlogo is set to white */
text-decoration: none;
/* */
}
header ul {
/* This is the CSS for header unordered list */
list-style-type: none;
/* */
margin: 0;
/* Margin is set to 0 */
padding: 0;
/* Padding is set to 0 */
display: inline;
/* */
}
header ul a {
/* This is the CSS for header unordered a? */
display: block;
float: right;
}
header ul li a {
display: block;
margin: 0 0 0 30px;
padding: 10px 20px;
background: transparent;
color: white;
text-decoration: none;
line-height: 0.2px;
}
header ul li a:hover {
background: transparent;
color: #727272;
opacity: 0.8;
}
.innertubeheader {
margin: 15px;
margin-right: 70px;
}
/*********** Main ***********/
main {
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
min-width: 900px;
}
.innertube {
margin: 15px;
}
.innertubeimg {
margin: 0.1px;
position: relative;
}
.jumbo {
z-index: 200;
position: absolute;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
.jumboh1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 70px;
color: white;
}
.jumbop {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
color: white;
}
.container {
width: 80%;
margin: auto;
padding-left: 70px;
padding-right: 70px;
}
p {
color: #212121;
}
.colwrap {
position: relative;
float: left;
left: 0;
width: 100%;
}
.colleft {
position: relative;
float: left;
left: 0;
width: 46%;
padding-right: 5px;
}
.colright {
position: relative;
float: right;
right: 0;
width: 46%;
padding-left: 5px;
}
img {
max-width: 100%;
height: auto;
}
/*********** Footer ***********/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
overflow: hidden;
background: #F57C00;
}
footer p {
color: white;
line-height: 10px;
}
.innertubefooter {
margin: 15px;
margin-left: 70px;
}
/* Right Navigation */
#nav {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
width: 00px;
overflow: auto;
background: #444;
}
.navlogo {
float: left;
max-height: 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home | Pincello</title>
<link rel="stylesheet" type="text/css" href="public/main.css" />
</head>
<body>
<header id="header">
<div class="innertubeheader">
Pincello
<ul>
<li>
Support
</li>
<li>
Higeo
</li>
<li>
About Pincello
</li>
<li>
Products
</li>
</ul>
</div>
</header>
</div>
<main>
<div class="innertubeimg">
<div class="jumbo">
<h1 class="jumboh1">T E R R A ' S F I N E S T</h1>
<hr style="width:30%">
<p class="jumbop">P H O N E S | T A B L E T S | L A P T O P S</p>
</div>
<img alt="SJ" src="012_ISC_2012_Monday_IZ3A1945.jpg">
</div>
<div class="innertube">
<div class="container">
<h3 style="text-align:center; font-size:18px; color:#F57C00">Who we are?</h3>
<h3 style="text-align:center">THE MASSIVE PROJECT</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>What is Pincello?</b>
<hr>
<br>Pincello is the leading brand of today's generation when it comes to technology.
<br>
<br>We <b>NEVER</b> felt tired being a leader.
<br>
<br>As a leader, we strongly abide to our <b>Vision and Mission</b>.
<br>
<br>
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>Vision and Mission</b>
<hr>
<br><b>VISION:</b>
<br>To lead the current generation in the world of Information Technology.
<br>
<br><b>MISSION:</b>
<br>For the people, By the people.
<br>
<br>
<br>
<br>
</p>
</div>
</div>
<br>
<hr>
<br>
<h3 style="text-align:center; font-size:18px; color:#F57C00">Our Partner</h3>
<h3 style="text-align:center">HIGEO</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLLSHIT
<br>
<br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>TITLE</b>
<hr>
<br>BULLSHIT
<br>
<br>
</p>
</div>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="innertubefooter">
<p class="text-left">Copyright 2015 Pincello. All rights reserved.</p>
</div>
</footer>
</body>
</html>
The problem is you're positioning the .jumbo div absolutely, which effectively takes it out of the page's flow (i.e. content will flow beneath it). Remove the position: absolute property, & things will no longer overlap.
EDIT:
Here's the block in question.
.jumbo {
z-index: 200;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
I just removed the position: absolute property.
/*********** Color Palette ***********/
.dark-primary-color{
background: #F57C00;
} /* Darker Orange */
.default-primary-color {
background: #FF9800;
} /* Lighter Orange */
.light-primary-color {
background: #FFE0B2;
} /* Peach Orange */
.accent-color {
background: #448AFF;
} /* Blue */
.primary-text-color {
color: #212121;
} /* Black */
.secondary-text-color {
color: #727272;
} /* Grey */
.divider-color {
border-color: #B6B6B6;
} /* Light Grey */
/*********** General ***********/
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
}
body { /* This is the CSS for body */
overflow: hidden; /* Overflow set to hidden. Any elements outside of the window will not be shown */
height: 100%; /* Height set to 100% means the body will extend from the top of the window to the bottom */
max-height: 100%; /* Maximum height is limited to 100% */
font-family: 'Montserrat', sans-serif; /* Font used in body is Montserrat */
line-height: 1.5em; /* Line spacing is set to 1.5em */
font-size: 18px; /* Font size set to 18px */
}
hr { /* This is the CSS for horizontal line */
border-color: #F57C00; /* Color of horizontal line is dark orange */
}
h1 { /* This is the CSS for Header 1 */
font-family: 'Montserrat', sans-serif; /* Font used in header 1 is Montserrat */
font-size: 70px; /* Font size set to 70px */
font-weight: 500; /* Font weight is set to 500 */
}
h2 { /* This is the CSS for Header 2 */
font-family: 'Montserrat', sans-serif; /* Font used in header 2 is Montserrat */
font-size: 60px; /* Font size set to 60px */
font-weight: 500; /* Font weight is set to 500 */
}
h3 { /* This is the CSS for Header 3 */
font-family: 'Montserrat', sans-serif; /* Font used in header 3 is Montserrat */
font-size: 50px; /* Font size set to 50px */
font-weight: 500; /* Font weight is set to 500 */
}
h4 { /* This is the CSS for Header 4 */
font-family: 'Montserrat', sans-serif; /* Font used in header 4 is Montserrat */
font-size: 40px; /* Font size set to 40px */
font-weight: 500; /* Font weight is set to 500 */
}
p { /* This is the CSS for Paragraph */
font-family: 'Montserrat', sans-serif; /* Font used in paragraph is Montserrat */
font-size: 18px; /* Font size is set to 18px */
font-weight: 400; /* Font weight is set to 400 */
}
/*********** Header ***********/
#header { /* This is the CSS for header */
position: absolute; /* Position is set to absolute */
top: 0; /* Top is set to 0. There is no spacing between the header and the top of the browser */
left: 0; /* Left is set to 0. There is no spacing between the header and the left of the browser */
width: 100%; /* Width is set to 100%. The width will stretch from the browser's left to the right */
height: 50px; /* Height is set to 50px. The height of the header is 50pixels tall */
overflow: hidden; /* Overflow is set to hidden. Any elements outside of the header will not be shown. No scrollbar will be added */
background: #F57C00; /* Background color is set to dark orange */
}
.headerlogo { /* This is the CSS for headerlogo */
position: absolute; /* Position is set to absolute */
float: left; /* Element will float to the left */
top: 13px; /* Top is set to 13px. The spacing between the top of the parent and the headerlogo is 13pixels */
max-height: 40px; /* Maximum height of headerlogo is 40px */
width: auto; /* The width is set to auto. It will align proportionally to the height */
margin-left: 70px; /* The spacing at the left outside of headerlogo is 70px */
font-family: 'Merienda', cursive; /* Font used for headerlogo is Marienda */
font-size: 30px; /* Font size used is 30px */
color: white; /* Color of the headerlogo is set to white */
text-decoration: none; /* */
}
header ul { /* This is the CSS for header unordered list */
list-style-type: none; /* */
margin: 0; /* Margin is set to 0 */
padding: 0; /* Padding is set to 0 */
display: inline; /* */
}
header ul a { /* This is the CSS for header unordered a? */
display: block;
float: right;
}
header ul li a {
display: block;
margin: 0 0 0 30px;
padding: 10px 20px;
background: transparent;
color: white;
text-decoration: none;
line-height: 0.2px;
}
header ul li a:hover {
background: transparent;
color: #727272;
opacity: 0.8;
}
.innertubeheader {
margin: 15px;
margin-right: 70px;
}
/*********** Main ***********/
main {
position: fixed;
top: 50px;
bottom: 40px;
left: 0;
right: 0;
overflow: auto;
background: #EFEFEF;
width: 100%;
}
.innertube {
margin: 15px;
}
.innertubeimg {
margin: 0.1px;
position: relative;
}
.jumbo {
z-index: 200;
text-align: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 16%;
}
.jumboh1 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 70px;
color: white;
}
.jumbop {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 20px;
color: white;
}
.container {
width: 80%;
margin: auto;
padding-left: 70px;
padding-right: 70px;
}
p {
color: #212121;
}
.colwrap {
position: relative;
float: left;
left: 0;
width: 100%;
}
.colleft {
position: relative;
float: left;
left: 0;
width: 46%;
padding-right: 5px;
}
.colright {
position: relative;
float: right;
right: 0;
width: 46%;
padding-left: 5px;
}
img {
max-width: 100%;
height: auto;
}
/*********** Footer ***********/
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
overflow: hidden;
background: #F57C00;
}
footer p {
color: white;
line-height: 10px;
}
.innertubefooter {
margin: 15px;
margin-left: 70px;
}
/* Right Navigation */
#nav {
position: absolute;
top: 50px;
bottom: 50px;
right: 0;
width: 00px;
overflow: auto;
background: #444;
}
.navlogo {
float: left;
max-height: 40px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul a {
color: darkgreen;
text-decoration: none;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda:700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home | Pincello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="wrapper">
<header id="header">
<div class="innertubeheader">
Pincello
<ul>
<li>
Support
</li>
<li>
Higeo
</li>
<li>
About Pincello
</li>
<li>
Products
</li>
</ul>
</div>
</header>
</div>
<main>
<div class="innertubeimg">
<div class="jumbo">
<h1 class="jumboh1">T E R R A ' S F I N E S T</h1>
<hr style="width:30%">
<p class="jumbop">P H O N E S | T A B L E T S | L A P T O P S</p>
</div>
<img alt="SJ" src="012_ISC_2012_Monday_IZ3A1945.jpg">
</div>
<div class="innertube">
<div class="container">
<h3 style="text-align:center; font-size:18px; color:#F57C00">Who we are?</h3>
<h3 style="text-align:center">THE MASSIVE PROJECT</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>What is Pincello?</b><hr><br>Pincello is the leading brand of today's generation when it comes to technology.<br><br>We <b>NEVER</b> felt tired being a leader.<br><br>As a leader, we strongly abide to our <b>Vision and Mission</b>.<br><br><br><br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>Vision and Mission</b><hr><br><b>VISION:</b><br>To lead the current generation in the world of Information Technology.<br><br><b>MISSION:</b><br>For the people, By the people.<br><br><br><br>
</p>
</div>
</div>
<br>
<hr>
<br>
<h3 style="text-align:center; font-size:18px; color:#F57C00">Our Partner</h3>
<h3 style="text-align:center">HIGEO</h3>
<div class="colwrap">
<div class="colleft">
<p align="justify" style="font-size:30px"><b>TITLE</b><hr><br>BULLLSHIT<br><br>
</p>
</div>
<div class="colright">
<p align="justify" style="font-size:30px"><b>TITLE</b><hr><br>BULLSHIT<br><br>
</p>
</div>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="innertubefooter">
<p class="text-left">Copyright 2015 Pincello. All rights reserved.</p>
</div>
</footer>
</body>
</html>
So im fully aware of the amount of questions asked about "Sticky Footers", and have also referenced many, MANY different questions on here and websites about sticky footers. I've created a fresh template away from this project that work and have examples of how sticky footers operate, be it inside the wrapper or out...
However, i just cant seem to get it operate correctly within my solution.
Currently the footer appears to be "sticky", however on one of my main pages, the content (images and text) seem to overlap the footer, due to the footer not being pushed to the bottom correctly. It seems to sit just below the screen (Meaning you have to scroll slightly to see the footer) - But on this page it sits in that location, doesnt get pushed down and then the content overlaps.
I've tried everything, Removing 100% on HTML, BODY, WRAPPER, contentDiv, but basically, one thing works, which breaks another.
What im after is, ContentDiv = 100% (pushing down the footer). So i should be able to create a blank page, the footer be glued to the bottom, and if content increases it pushed it down... Simple right? But tearing out my hair with this :/
So, any help would be massively appreciated, as i have a short deadline to get this sorted.
Fiddle Demo
CSS
html
{ margin: 0px; padding: 0px; height:100%; }
body
{ margin: 0px; padding: 0px; height: 100%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
/* { margin: 0px; padding: 0px; height: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; } */
p { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; }
h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:24px; }
h2 { margin:0px; padding:0px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }
/* PAGE FORMATTING - START*/
span:hover { /* text-decoration: underline; */ }
a:link, a:visted { }
ahover, a:active { }
.link_nav_header{
padding:0px;
font-size:20px;
font-weight:bold;
color:#333333;
cursor:pointer;
}
.but_default
{
padding: 2px;
border: 1px solid #009900;
background-color: #33FF00;
/* background-color: #dddbdb; */ /* TWO COLOURS? */
}
.but_events-buybutton
{
padding:3px;
min-width:90%;
margin-bottom:5px;
color:#ffffff;
background-color:#378ec8;
}
.but_all
{
min-width:90%;
cursor: pointer;
margin: 2px;
}
/* HEADER - START */
.hdr_container
{
width:100%;
height:110px;
padding:0px;
margin:0px;
position:relative;
background-color:#0099ff;
color: #ffffff;
overflow: hidden;
}
#hdr_profile-icon {
margin-top: 1%;
margin-right: 1%;
float: right;
background-color: inherit;
}
/* NEW NAVIGATION */
#nav {
width: 100%;
padding: 0;
margin: 0 auto;
background-color: #333333;
position: absolute;
bottom: 0%;
}
#nav ul {
list-style: none;
/* width: 800px;*/ /* REMOVE TO STRETCH NAV TO FULL WIDTH */
width: 100%;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
text-align: center;
}
#nav ul li{
width: 11%; /* STRETCHES NAV TO FULL WIDTH */
}
#nav li a {
padding: 8px 15px;
display: block;
text-decoration: none;
font-weight: bold;
color: white;
text-transform:uppercase
}
#nav li:first-child a {
background: red;
width: 10px;
font-weight: normal;
}
#nav li a:hover {
/* color: #c00; */
background-color: #0099ff;
}
#nav a:hover a:focus {
/* color: #c00; */
background-color: red;
}
/* MAIN CONTENT - START */
#wrapper {
clear: both;
/* margin: 0 auto; */
width: 100%;
height:100%;
min-height: 100%;
/* margin-bottom: -75px; */
z-index:10;
}
.contentDiv
{
clear: both;
width:65%;
min-width: 800px;
height:90%;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
/* z-index: -9999; */
}
/* TABLE - START */
.tbl_container-centered
{
width:100%;
height:100%;
min-height:100%;
/* padding-bottom: 20px; */
margin-left:auto;
margin-right:auto;
display:table;
overflow:auto;
/* margin-bottom: 75px; */
display: inline-table;
vertical-align: middle;
}
.tbl_containerpaneltext-centered
{
width:95%;
min-height:35%;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.tbl_head-genericthread
{
min-height:3%;
max-height:3%;
text-align:center;
color:#ffffff;
background-color:#0099ff;
}
.tbl_events-head {
width: 100%;
height: 100%;
min-height: 100%;
border: 1px solid;
text-align: left;
border-collapse: collapse;
}
.tbl_grid-events
{
background-color: #ffffff;
}
.tbl_pickseats-famtable
{
width:100%;
background-color:#e1e1e1;
}
table#tbl_events{
height:100%;
min-height:100%;
border-collapse: collapse;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
}
.link_moreinfo{
padding:0px;
font-size:14px;
font-weight:bold;
color:#0099ff;
cursor:pointer;
}
#event_row {
height: 140px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#basket2 {
background: red;
}
/* FOOTER CSS - START */
.footer_container
{
clear: both;
width:100%;
height:75px;
bottom:0;
background-color:#0099ff;
/* position:absolute; */
}
.footer_container, .wrapper:after {
/* .push must be the same height as footer */
height: 75px;
}
.wrapper:after {
content: "";
display: block;
}
.footer_global-bottom {
width: 100%;
margin: auto;
padding-top: 20px;
text-align: center;
color: white;
background: #333333;
}
.footer_global-bottom a {
color: white;
text-decoration: none;
}
/* ERROR HANDELING */
.error {
background: #ef7474;
border: 1px solid #f5aca6;
text-align: center;
}
.success
{
background: #74e963;
border: 1px solid #59e836;
text-align: center;
}
.alerts_box {
padding: 10px;
width: 250px;
position: absolute;
visibility: hidden;
font-size: 10px;
color:black;
}
.alerts {
width: 275px;
z-index: 2;
padding-bottom: 40px;
}
have you considered using this piece of code:
.footer_container {
position: fixed;
bottom: 0;
z-index: 100;
}
If you want full content being visible you can add to wrapper something like this:
margin-bottom: (footer-height)px;
Or use padding-bottom instead of margin-bottom.
in your #wrapper rule-set change height:100% to height:auto and remove min-height:100%.
jsFiddle
#wrapper {
clear: both;
width: 100%;
height:auto;
z-index:10;
}
I believe that setting the height to 100% is setting it to 100% of the browser window, not 100% of the content. I could be wrong about that though.
This will place the footer at the end of the content. On pages where the content is less than the height of the window, you can wrap the footer and give the footer wrapper a class like this:
.minContentFooter {
position: absolute;
bottom: 0;
}
If the case is that the content is loaded dynamically and you don't know if it will fill a browser window, then you will need a bit of javascript to have it both ways - either at the bottom of the content or the bottom of the window when there is minimal content.
Problem was solved, not by CSS, but by Javascript.
The problem was due to the page loading dynamic content from a table, it never knew how big the contentDiv was, so didnt know where to but the footer.
The sticky footer is achieved by setting CSS % heights, and also using javascript to help correct for pages with no content or those with dynamically loaded content.
The code below explains the active javascript:
var totalHeight = $('#header').height() + $(id).height();
var contentDivHeight = $('#content').height();
var wrap = $('#wrapper');
if (totalHeight >= contentDivHeight) {
wrap.removeClass('wrapper-height');
wrap.addClass('wrapper-minHeight');
} else {
wrap.addClass('wrapper-height');
wrap.removeClass('wrapper-minHeight');
}
The code checks the height of the header and the content contained within the content and if its over the footer switches to a css class enforcing min-heights rather than heights to allow the footer to flow to the end of the content.
Many Thanks for everyone's help.