I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.
the CSS:
html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-align:center;
float:left;
position:relative;
body:before;
content:"";
overflow:auto;
margin-top:50px;
padding:10px;
}
#footer, #push{
height:50px;
}
.clearboth {
clear:both;
}
The HTML:
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
and your css, I took away the left -5%:
#page {
min-height: 100%;
position:relative;
}
#main {
padding-bottom: 50px;
}
#footer {
background-color:#4a4a4a;
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding:10px;
font-family:'discoregular';
display: block;
overflow:auto;
text-align:center;
float:left;
margin-top:50px;
}
change the css to the following.You can chage the "bottom" so that it can come up
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px;
padding:10px;
}
All I added into my footer styles after reading this post was- overflow:auto; - and it's sorted now
Related
I have a header with width: 100% and I want to make it automatically adjustable not only to screen width, but to page full width that can be stretched beyond screen width by other elements. I can do it with JS, but I wonder if it is possible to use pure CSS to achieve this.
In the example below the A block is intended to be the same size as the B block, but it is much shorter on small screens (just scroll everything to the right and you can see).
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
Any ideas?
You can try adding display: grid to the container, in this case body
body {
display: grid;
}
#A {
background: lightblue;
color: white;
}
#B {
position: relative;
width: 5000px;
background: darkblue;
color: white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
If you wrap the two divs (A & B) inside another you can achieve this.
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
.header-wrap { display: inline-block; }
<html>
<head></head>
<body>
<div class="header-wrap">
<div id="A">A</div>
<div id="B">B</div>
</div>
</body>
</html>
html,
body {
position: relative;
width: 100%;
}
#B {
position: absolute;
width: 100%;
top: 100%;
left: 0;
background: lightblue;
color: white;
}
#A {
position: relative;
width: 5000px;
background: darkblue;
color: white;
min-width:100%;
}
<div id="A"><div id="B">B</div>A</div>
Try giving your A div a max-width of 5000px as well as width:100%
#A{
position:relative;
width:100%;
max-width:5000px;
background:lightblue;
color:white;
}
How do I position the navbar inside the header? If I float the divs inside the header it works fine. But when I remove the float the navbar positions below the header. I dont understand it. How do I fix it?
html{
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
}
.nav{
height:90%;
width:75%;
margin:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basic</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<div class="nav">
</div>
</div>
</div>
</body>
</html>
bydefault div element are block label element that's it took 100% width.
you can change it's to 'inline' element using float, inline-block. >br/>
check updated snippet below
html {
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
display: inline-block;
}
.nav{
height:90%;
width:75%;
display: inline-block;
}
<div id="container">
<div id="header">
<div class="logo">logo</div>
<div class="nav">
Nav1
Nav2
Nav3
Nav4
</div>
</div>
</div>
If u make the logo position:absolute it wont push down the navbar.
You do have to specify heigth and width since it will not compare to the parent div.
.logo{
height:40px;
width:100px;
position: absolute;
}
An other way of fixing this is by giving a negavtive margin to the navbar.
This way you dont have to specify the width and heigth of the logo.
.nav{
height:90%;
width:75%;
margin:-35px auto;
}
I've a simple web page that contains a <div> on background (a green rectangle on background) and a second <div> that is the "body" it contains paragraphs, table etc
And on bottom I need to to put a simple footer containing juste copyrights and some socials networks buttons. The problem is : the footer is not on bottom, there is a space under the footer, how to avoid this please ?
See my simple code please
On jsfiddle is better (to see the space under the footer) see here please
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You forgot to remove default margin of body.
Set in css:
body {
margin: 0;
}
Fiddle
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin: -50px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For best practice always set body and html 0 margin and 0 padding.
body,html{
margin:0;
padding:0;
}
Add this to .footer
margin-top:50px;
Perhaps you want to stick your footer to the bottom?
Clear the paddings and margins by:
html, body {
padding:0;
margin:0;
}
then
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position:absolute;
bottom:0;
}
Working fiddle
Set the min height of body to 100% and set position to absolute.
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
}
html, body{
padding: 0;
margin: 0;
}
html{
height: 100%;
}
body{
min-height: 100%;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
position: absolute:
bottom: 0;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
For that case you just need to set the margin and padding of body tag to 0.
body {
margin: 0;
padding: 0;
}
Or if your site have margins specified you can only set the bottom margin of body as.
body {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
body {
margin: 0;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
footer{
width:100%;
height:65px;
background-color:red;
opacity:0.5;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
Modify content css:
.content{
width:80%;
height:300px;
margin:10px auto;
background-color:gold;
text-align:center;
}
.bg-green{
width:100%;
height:100px;
background-color:green;
}
.content{
width:80%;
height:300px;
margin:-50px auto;
background-color:gold;
text-align:center;
padding-top:100px;
}
footer{
width:100%;
height:65px;
margin-top: -65px;
background-color:red;
opacity:0.5;
position: absolute;
bottom: 0
}
body {
margin: 0;
min-height: 100%;
padding-bottom: 100px;
position: relative;
box-sizing: border-box;
}
html {
height: 100%;
}
<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>
<footer>this is the footer</footer>
You can fix footer at bottom by position: absolute;
Updated fiddle
Use position: absolute;bottom: 0; Style in footer class
footer
{
width: 100%;
height: 65px;
background-color: red;
opacity: 0.5;
position: absolute;
bottom: 0;
}
Click Here Live Demo
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
I am trying to get a sticky footer at the bottom of the page with a solid header at the top of the page. But I am having some difficulties with the body and html class.. My header is 100px in height from the top of the page, my html and body classes are 100% in height and my footer is 150px. I have correctly written the footer in my page so it sticks to the bottom, but the 100% height of the html or body is placing it even further down my page so that you would have to scroll to see the footer even though there is no text pushing it that far down! Here is my CSS code:
html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}
body {
height:100%;
margin:0;
padding:0;
}
.wrapper {
min-height:100%;
}
.header {
position:fixed;
background:#FFF url(pics/header.png) no-repeat top center fixed;
top:0;
height:100px;
width:1920px;
z-index:1000;
}
.main {
position:absolute;
top:100px;
width:990px;
left:0;
right:0;
overflow:auto;
margin:0 auto;
padding-bottom:150px; /* must be same height as the footer */
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
.footer {
position:relative;
background-image:url(pics/bg_footer.png);
margin-top:-150px; /* negative value of footer height */
height:150px;
width:990px;
margin:0 auto;
clear:both;
}
And here is my HTML code:
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="main">
<p>I can write here</p>
</div>
</div>
<div class="footer">
<p class="alignleft">© Tim</p>
<p class="alignright">17 maart 2013</p>
</div>
</body>
I am almost certain it has something to do with the html height of 100%.. Thanks in advance for your help!
Can you try this:
<body>
<div class="header"></div>
<div class="main">
<p>I can write here</p>
</div>
<div class="footer">
<p class="alignleft">© Tim</p>
<p class="alignright">17 maart 2013</p>
</div>
</body>
Does this suits your needs?
CSS
html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}
body {
padding:0;
margin:0;
}
.header {
background:#FFF url(pics/header.png) no-repeat top center fixed;
height:100px;
width:100%;
}
.main {
position:absolute;
top:100px;
bottom:150px;
overflow:auto;
margin:0 auto;
width:100%;
padding-bottom:10px;
padding-top:10px;
padding-left:5px;
padding-right:5px;
}
.footer {
position: absolute;
width: 100%;
bottom:0;
background-image:url(pics/bg_footer.png);
height:150px;
width:100%;
margin:0 auto;
clear:both;
}
Check JSFiddle example:
http://jsfiddle.net/2SL7c/
How about letting footer be fixed as well? I've made this jsFiddle, take a look. I changed your divs to IDs instead of classes (as they are unique and should only appear once).
#footer {
position:fixed;
bottom: 0;
background-image:url(pics/bg_footer.png);
background-color:#FF0;
height:150px;
width: 100%;
}
I made a javascript function for resolve this
<script type="text/javascript">
$(window).bind("load", function () {
var distance = 20;
var header = $("#header");
var posContent = header.position().top;
posContent = posContent + header.height() + distance;
var content = $("#content");
content.css({ 'top': posContent + 'px' });
var posFooter = content.position().top;
posFooter = posFooter + content.height() + 200;
var footer = $("#footer");
footer.css({ 'top': posFooter + 'px' });
})
</script>
my CSS look right this
#footer{
background-color: #E6E6E6;
background-repeat: repeat;
bottom: 0;
height: 100%;
pointer-events: none;
position: absolute;
width: 100%;
height:50px;
z-index: -1;
}
#header{
background-color: #E6E6E6;
background-repeat: repeat;
height: 100%;
pointer-events: none;
position: absolute;
top: 5px;
width: 100%;
height:50px;
z-index: -1;
}
#content{
pointer-events: none;
position: absolute;
width: 100%;
z-index: -1;
}
Finally
the html code
<div id="header">your content</div>
<div id="content">your content</div>
<div id="footer">your content</div>
works perfectly no matter how great be the content
;D