I am not good in web-designing, I am working on a web template that was automatically generated by Adobe Dreamweaver.
I want to push the footer's DIV to the bottom of page even I have no content on the page.
This is .CSS (I have omitted some of it)
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
}
.header {
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background: #CCC49F;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the
}
And this is the common markup of my pages.
<body>
<div class="container">
<?php
include('templates/header.php');
include_once('templates/sidebar.php');
?>
<div class="content">
<!-- end .content --></div>
<div class="footer">
<p>This is a simple footer.</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
And footer on page looks like
I have tried this for footer.
position: fixed;
bottom: 0;
width: 100%;
But then page looks like
Here is a solution that I use, its a HTML 5. But this should work for you. Just change the class and you should be good to go.
footer {
background: #000;
position: absolute;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
See Fiddle
Also you can use the fixed position approach which works just as good or better
footer {
background: #000;
position: fixed;
bottom: 0px;
display: flex;
height: 40px;
width: 100%;
}
Check the DEMO.
Check the 3 lines at bottom are responsible to keep the footer at bottom.
.footer {
padding: 10px 0;
background: #CCC49F;
clear: left;
/*Below 3 lines are the responsible to keep it at bottom*/
position: absolute;
bottom:0;
width: 100%;
}
you can try
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
}
.container {
width: 960px;
margin:auto;
min-height:100%;
position:relative;
background: #FFF;
}
.header {
height: 50px;
background: #ADB96E;
}
.sidebar1 {
float: left;
width: 180px;
background: #EADCAE;
padding-bottom: 10px;
}
.content {
background:#5ee;
padding: 10px 0;
width: 780px;
float: left;
}
.content {
padding-bottom:80px; /* Height of the footer element */
}
.footer {
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
background: #CCC49F;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="sidebar1">
</div>
<div class="content">
</div>
<div class="footer">
<p>This is a simple footer.</p>
</div>
</div>
</body>
Related
I'm having an issue with my site's footer. Whenever more content is added further down the page and a scrollbar is made available, the user scrolls and the footer is not at the bottom. The footer is in position absolute, and shows neatly at the bottom of the screen before the user scrolls down. This would be find if the user didn't have to scroll down, but obviously some pages are longer than others. All the code is shown below. Using fixed would obviously not do what I want. I want the user to scroll down to the bottom of a page to find the footer there, like with most websites.
HTML:
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
<div id="footer"><p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p></div>
CSS:
#box {
position:relative;
}
.boxa {
left:173px;
bottom:34px;
width:249px;
}
.boxb {
left:430px;
bottom:55px;
width:90px;
}
#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:7.5px;
font-family:arial;
z-index:1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:15px;
line-height:25px;
font-size:90%;
}
#topbox {
background-color:white;
width:50000px;
height:50px;
position:relative;
bottom:8px;
right:8px;
padding-right:20px;
}
#media screen and (min-width:1008px) {
#textbox {
width:auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width:auto;
}
}
#footer {
background-color:gray;
height:75px;
position:absolute;
bottom:0px;
left:0px;
color:lightgray;
font-family:arial;
width:100%;
}
.backgroundimage {
border-bottom:300px solid rgb(247,145,47);
border-right:3000px solid transparent;
z-index:0;
position:relative;
right:110px;
bottom:70px;
}
Please read carefully through my code tosee what I have attempted, and how everything works together. I have had no issues with the page at all, so if there is code completely irrelevant to the footer just leave it as is. Also please actually read through what I have already said so you are fully aware of what I am trying to achieve. Many thanks in advance.
If you mean a sticky footer, which is always on bottom position at less content. When more content is visible the footer is scollable again.
One way is to use flexbox. Use a wrapper and two divs inside. The Second is the footer. Then you give the first div more space.
This technic works in all modern browsers.
*{
padding: 0;
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
<body>
<header>header…</header>
<main>main…</main>
<footer>footer…</footer>
</body>
Make it position:absolute
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
if I understood correctly what you want, try this:
.backgroundimage {
border-bottom: 300px solid rgb(247,145,47);
z-index: 0;
position: relative;
right: 110px;
}
#footer {
background-color: gray;
height: 75px;
bottom: 0;
left: 0;
right: 0;
margin-top: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
Wrap all the elements in a div
<body>
<div> ...all your content... </div>
<div id"footer"></div>
</body>
jsfiddle link
#box {
position: relative;
}
.boxa {
left: 173px;
bottom: 34px;
width: 249px;
}
.boxb {
left: 430px;
bottom: 55px;
width: 90px;
}
#textbox {
position: relative;
background: rgba(255, 255, 255, 1);
padding: 7.5px;
font-family: arial;
z-index: 1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius: 15px;
line-height: 25px;
font-size: 90%;
}
#topbox {
background-color: white;
width: 50000px;
height: 50px;
position: relative;
bottom: 8px;
right: 8px;
padding-right: 20px;
}
#media screen and (min-width:1008px) {
#textbox {
width: auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width: auto;
}
}
html {
height: 100%;
box-sizing: border-box;
}
body {
min-height: 100%;
padding-bottom: 75px;
/*size of the footer*/
position: relative;
margin: 0;
box-sizing: border-box;
}
#footer {
background-color: gray;
height: 75px;
position: absolute;
bottom: 0px;
left: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
.backgroundimage {
border-bottom: 300px solid rgb(247, 145, 47);
border-right: 3000px solid transparent;
z-index: 0;
position: relative;
right: 110px;
bottom: 70px;
}
<div id="mainpart">
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
</div>
<div id="footer">
<p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p>
</div>
I had a very nice idea to make my project much prettier.
I want that the footer is standard like in the picture below:
And when i scroll further down now, that the footer goes up and bellow it is all the stuff like the "Impressum" and "Contact".
I searched the Internet for various solutions but couldn't find something fitting.
I hope you can help me.
Code of my footer:
HTML:
<footer>
<div class="footer">
<p class="footer-text">OneClick</p>
</div>
</footer>
CSS:
.footer {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
padding-top: 10px;
background: #F28724;
font-size: 1.3em;
}
.footer-text {
color: #3a3a3a;
}
.footer-text > a {
color: #3a3a3a;
display: table;
text-align: center;
margin-right: auto;
margin-left: auto;
}
$(function() {
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.footerContent').slideDown(650);
} else if ($(document).scrollTop() < 100) {
$('.footerContent').fadeOut(500);
}
});
})
body,
html {
height: 1000px;
}
.footer {
position: fixed;
z-index: 99;
left: 0px;
right: 0px;
bottom: 0px;
width: 100%;
padding-top: 10px;
background: #F28724;
font-size: 1.3em;
}
.footer-text {
color: #3a3a3a;
}
.footer-text > a {
color: #3a3a3a;
display: table;
text-align: center;
margin-right: auto;
margin-left: auto;
}
.footerContent {
height: 150px;
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background: #F28724;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
<p class="footer-text">OneClick
</p>
</div>
<div class="footerContent">
<p>Contact ...
<p>
</div>
You could try this solution that uses the calc function of CSS (read more: http://www.w3schools.com/cssref/func_calc.asp), however, this is reported not supporting the IE8, I believe Chrome will run it well
HTML:
<header>
<h1>Header</h1>
</header>
<main>
<content>
<p>content</p>
</content>
<footer>
<p>Footer</p>
</footer>
</main>
CSS:
html,
body {
margin:0;
padding:0;
min-height:100vh;
}
header {
background: LightSlateGray;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header h1 { margin: 0; }
main { height: auto; min-height: calc(100vh - 100px); }
content, footer { display: inline-block; width: 100%; }
content { height: auto; min-height: calc(100vh - 200px); background:lightblue; }
footer {
height:100px; /* Height of the footer */
background:#6cf;
}
Demo: https://jsfiddle.net/89ucrec5/4/
assign absolute position to footer and bottom:0;
The code:
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
How can I place the footer at the bottom of the page? I've tried experimenting with padding, bottom and margin but I haven't been very successful so far. Can someone tell me how to place the footer at the bottom of the page? Thanks
you can do this one sir:
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: fixed;;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
text-align:center;
}
HERE MY CODE
You need to set body height to 100%. Currently the body covers only upto the content you have. There was no explicit height set for the body element.
Since body needs to calculate 100% of the parent element, set html height to 100% as well.
html,
body {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Slide-Up Dialogue Box</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer">
Who is Online?
</div>
</div>
</body>
</html>
If you aim to "fix" your element to the bottom of the screen, set:
position: fixed;
bottom: 0;
On a side note, it might be a good idea for you to start learning about HTML5 elements like "footer" instead of using divs for everything. Also note that id's are unique and styling is best applied in mass/generically (use classes instead).
I've got a small problem, I want my footer to stay at the bottom of the screen with position: absolute. But my margin: auto to put it in the middle of the screen isn't working anymore.
html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<link rel="shortcut icon" href="../IMAGES/favicon.ico">
<title>TEST</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../css/stylesheet.css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="../IMAGES/logo.png" />
</div>
<div id="logotitel">
Den Allerstrafste "Ful-Ambi" Live-Band van groot Antwerpen en omstreken!
</div>
</div>
<div id="nav">
<div id="links">
<div class="link">Home</div>
<div class="link">Wie is wie</div>
<div class="link">Foto's</div>
<div class="link">Repertoire</div>
<div class="link">Links</div>
<div class="link">Contact</div>
</div>
</div>
<div class="clear"></div>
<div id="content">
TEST
</div>
<div class="clear"></div>
<div id="footer">
<div id="copy">
Developed by Yoshi © vAntstAd
</div>
</div>
</body>
</html>
CSS:
/* PAGE LAYOUT */
html
{
padding: 0px;
margin: 0px;
}
body
{
background-image: url(../IMAGES/background.png);
padding: 0px;
margin: 0px;
color: white;
font-family: 'Source Sans Pro', serif, sans-serif;
}
.clear
{
clear: both;
}
/* HEADER */
#header
{
width: 1100px;
height: 150px;
background-color: #282828;
margin: auto;
border-bottom: solid;
border-color: red;
}
#logo
{
width: 283px;
height: 100px;
margin: auto;
}
#logotitel
{
width: 1100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: x-large;
}
/* NAV */
#nav
{
width: 1100px;
height: 50px;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
background-color: red;
}
#links
{
width: 600px;
height: 50px;
margin: auto;
}
.link
{
width: 100px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
color: white;
text-decoration: none;
}
.link:hover
{
color: #282828;
text-decoration: underline;
}
/* CONTENT */
#content
{
width: 1100px;
height: auto;
margin: auto;
color: #282828;
position: relative;
}
/* FOOTER */
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
margin: auto;
background-color: #282828;
}
#copy
{
width: auto;
float: right;
margin-right: 5px;
height: 50px;
line-height: 50px;
}
Since you know the width of the footer (1100px), you can just do a left:50%;margin-left:-550px to center it.
Example: Centering an absolutely positioned element
http://jsfiddle.net/vdWQG/
Therefore, footer would become:
#footer
{
width: 1100PX;
height: 50px;
position: absolute;
bottom: 0;
left:50%; /* Add this */
margin-left:-550px; /* Add this (this is half of #footers width) */
background-color: #282828;
}
If you want the element to stick on the bottom of the page as the user scrolls down, use position: fixed instead of position:absolute
To have a footer at the bottom, centered horizontally, you can apply the following CSS:
footer{
width: 100%;
max-width: 600px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
This will center the fixed element, but will also keep it responsive, as it will shrink when the browser has become less wide than the footer.
See this Fiddle for an example
I am trying to mimic the layout of having a fixed header and footer with content that fits between the two of them WITHOUT javascript or using a table. You can see what I'm looking for HERE
Actually this is simple. Here is the full code, just copy and paste it.
Credit to Jeremy (http://stackoverflow.com/questions/206652/how-to-create-div-to-fill-all-space-between-header-and-footer-div).
<style type="text/css">
html, body
{
height: 100%;
padding: 0;
margin: 0;
}
#header
{
height: 100px;
color: #FFF;
background: #000;
}
#content
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
color: #FFF;
background: #333;
}
#footer
{
height: 100px;
color: #FFF;
background: #000;
}
#divider
{
height: 100px; /*Divider must be same height as Footer */
}
</style>
<div id="content">
<div id="header">
Header
</div>
Content Text
<div id="divider"></div>
</div>
<div id="footer">
Footer
</div>