Im having some problems getting the Sticky Footer to work on my site. If the content is smaller than the window the footer should stay at the bottom of the window and the dead space should be filled up with a div. I think the CSS Sticky Footer does this, but I cant get the "push div" to work push the content all the way down. As you can see my code isn't just body-wrapper-footer.
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
}
#banner-bg {
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
Im confused about where the CSS Sticky Footer-code should go in my case.
Edit, heres what I got and what I want to do:
alt text http://bayimg.com/image/gacniaacf.jpg
Your HTML is a tad strange. For example, why does banner-bg wrap around everything?
That said, in order to use Sticky Footer technique you need to wrap everything but the footer into a single DIV. So your <body> tag would only contain two top DIVs - wrapper and footer. All the stuff you currently have would go inside that wrapper DIV.
Note that Sticky Footer may not work for you if background images you're using include transparent areas as it relies on wrapper background being covered by the header.
Update: Ok, here's the version that works. "Sticky Footer" style sheet is taken from cssstickyfooter.com and should work in all modern browsers. I've streamlined your HTML a bit (there's no need for separate background layers based on your picture) but you can modify it as you like so long as you keep the basic structure in place. Also, since I don't have your images I've added solid background colors for illustration purposes, you'll need to remove them.
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Instead of modifying your existing styles (or using CSS Sticky Footer), its a lot easier for me to just redo it. So here goes:
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
#container {
height: 100%;
margin: 0 0 -200px 0;
position: relative;
}
#footer {
position: relative;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">Oh Beautiful Header</div>
<div id="content">Lots of Content</div>
</div>
<div id="footer">Stay Put Little Footer</div>
</body>
Basically the negative margin should match the height of the footer, height 100% needs to be applied to html/body, and the position relative should be declared.
Also in reference to the xHTML, notice how the "footer" div is not INSIDE the "container" div, but rather, outside of it (so that there are 2 separate container-like divs, container and the footer).
If your still having trouble, the main problems with your markup IS:
100% height needs to be declared for html and body tag.
negative margin is missing on the container div which is the #banner-bg
if footer is 100px tall, #banner-bg should have margin-bottom: -100px
position needs to be relative on both #banner-bg and the #footer
html { height: 100%;}
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
height: 100%;
}
#banner-bg {
width: 100%;
height: 100%;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: relative;
margin: 0 0 -200px 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
#footer {
position: relative;
height: 200px;
}
and the rest:
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
<div id="footer">
Footer Content
</div>
</body>
</html>
I'm not sure what Sticky Footer meant to do when the content is actually longer than your page height...
If it should be floating over the text while you are scrolling then I would use Javascript to calculate the bottom coordinates and place the footer on a new layer in the fixed position. This could be made quite cross-browser friendly as well...
It's great to be able to implement the sticky footer using CSS and HTML alone, but I'm not a big fan of adjusting my markup / document structure for something cosmetic.
I much prefer a JavaScript approach, no graceful degradation. If no JS, no sticky footer. I typically use jQuery to implement:
jQuery
$(window).resize(function() {
if ($('body').height() < $(window).height()) {
$('#footer').addClass('fixed');
}
else {
$('#footer').removeClass('fixed');
}
}).resize();
CSS
#footer.fixed { position: fixed; bottom: 0; width: 100%; }
here you can find some code as follows
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
In CSS:
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
In HTML Body:
Your website content here.
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2013</p>
</div>
Related
I have a site that has a top navigation bar, a header, a sidebar and a content body next to the sidebar. The header, sidebar, and content body are positioned absolutely so that they don't move when you navigate to other pages that are using the same template. The sidebar and content body have scroll bars. The header and sidebar are always visible even with scrolling. This works great as shown in the demo. But suppose the top navigation changes height. Then the vertical alignment is off. Since this site is using a global top navigation that's used in other sites as well, the top navigation can change at any moment. When it does change, this layout will not be future proof. Is there a way to make this future proof?
What I have currently:
http://codepen.io/codingninja/pen/nKwox
body {
margin: 0;
padding: 0;
}
.content {
/*position: relative;*/
}
.top-nav {
background: #000;
height: 42px;
color: #fff;
}
.header{
position: absolute;
height: 100px;
width: 100%;
background: #ddd;
}
.sidebar {
position: absolute;
top: 142px;
left: 0;
bottom: 0;
background: #aaa;
overflow-y: auto;
overflow-x: hidden;
width: 100px;
}
.body {
position: absolute;
top: 142px;
right: 0;
left: 150px;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
What happens when the top nav changes height:
http://codepen.io/codingninja/pen/nICzK
.top-nav {
background: #000;
height: 100px;
color: #fff;
}
Do you mean this:
Css3 has a Calc() Function
Height: Calc( 100% - 100px )
Instead of absolutely positioning everything you can make use of display:table to achieve the layout you want. Using the following html
<div class="table">
<div id="top-nav" class="row">
<div class="cell">top-nav</div>
</div>
<div id="header" class="row">
<div class="cell">header</div>
</div>
<div id="content" class="row">
<div class="cell">
<div class="table">
<div id="side-bar" class="cell">
<div class="overflow">
sidebar
</div>
</div>
<div id="body-content" class="cell">
<div class="overflow">body-content</div>
</div>
</div>
</div>
</div>
</div>
And Css
html,
body,
.table {height:100%; padding:0; margin:0;}
.table {display:table; width:100%;}
.table .row {display:table-row;}
.table .cell {display:table-cell;}
#top-nav {height:42px;}
#header {height:100px;}
#content {height:100%;}
#side-bar {width:100px;}
.overflow {height:100%; overflow:auto;}
Example
You will notice that when your top nav grows, your main content area will shrink. You will also not get into a positioning / z-index nightmare
I found a solution that involves a line of javascript to set top to the calculated height based on the height of the top nav and the header.
$(".sidebar, .body").css('top', topnavheight+100);
Okay so I've started making myself a website for a project that I'm working on. I'm currently sorting out the layout for my website but am stuck on the navbar.
I want my navbar to span 100% of the website, and horizontally/vertically center my buttons (images).
What I've got works ... but I'm just wondering if I'm doing it the most efficient way?
Here is my html.
<div id="wrapper">
<div id="header">
<div id="navbar_left">
</div>
<div id="navbar_buttons">
<img src="../Originals/button_home.png" />
<img src="../Originals/button_logo.png" />
</div>
<div id="navbar_right">
</div>
</div>
</div>
Here is my CSS:
#wrapper {
width: 100%;
margin: 0 auto;
padding: 0;
}
#header {
height: 123px;
width: 100%;
background-image: url(../../Originals/header_background.png);
}
#navbar_left {
width: 25%;
height: 123px;
float: left;
}
#navbar_buttons {
height: 123px;
width: 50%;
float: left;
line-height: 123px;
text-align:center;
}
#navbar_buttons::after {
content: ".";
visibility: hidden;
}
#navbar_right {
width: 25%;
height: 123px;
float: left;
}
Check out this jsFiddle for one example of how you could simplify your markup and CSS. It makes use of inline-block for your images.
HTML (using the header element):
<div id="wrapper">
<header>
<img src="http://placehold.it/200x100" />
<img src="http://placehold.it/200x100" />
</header>
</div>
And CSS:
header {
text-align: center;
background: #222;
}
header img {
display: inline-block;
vertical-align: bottom;
}
Note that a div is display: block by default, so you don't need to specify the width of 100%: it will fill the available width. Similarly, you don't need to declare a margin or padding as they aren't doing anything.
I'd also avoid declaring a fixed height if you can avoid it: just let your parent div expand to the height of its contents.
So I'm trying to set up a container with a background image which repeats when other div elements are long enough within the container div. It hopefully won't repeat when the contained divs are short.
However, I cannot get the image to repeat - I think there's something iffy with the way I've coded the #container.
Here's the HTML I have just now...
<body>
<div id=container>
<div id=textblock>
<div id=maintext>
<p>text here</p>
</div>
</div>
</div>
</body>
And here's the CSS...
body {
background-color: #888;
background-position: top;
height:100%;
margin:0;
padding:0;
}
#container {
background-position: relative;
width: 960px;
min-height: 720px;
margin-left: auto;
margin-right: auto;
font-family: Antelope H;
font-size: 1.5em;
color: #c60;
background:url(images/containerback-01.png) repeat-y;
background-color: #fc6;
}
Here's the site as it is just now
This calls for a clearfix! Container elements only know to be as tall as un-floated children elements. Add this to your css file:
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */
and change your container div to open with <div id="container" class="clearfix">
This is not a css issue.
Simply place a
<br clear="all" />
after your
<div id="mainText"></div>
Whenever you use a float you have to use a clear
I've got a question regarding positioning of two objects: image and div. I want bg2.png image to stay under div. I keep encountering problem with image pushing div down by img's height. How do I avoid that?
I tried pushing down image with "top:" value but of course it leaves me with empty area above div. Also I tried adding negative "top:" value and relative position to "maincontent" div but again it left me with empty area, only difference was that this time it was under the div.
HTML:
<body>
<img src="./images/bg2.png" class="bgimg" />
<div id="maincontent">
</div>
</body>
CSS:
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
Thanks in advance.
edit - what I'm trying to achieve:
Click me!
2 solutions:
Change your HTML structure:
<body>
<div id="maincontent">
</div>
<img src="./images/bg2.png" class="bgimg" alt="some">
</body>
or make it as the background-image:
<body>
<div id="maincontent">
</div>
</body>
#maincontent {
background: url(./images/bg2.png) no-repeat 0 100%;
padding-bottom: height_of_image_in_px;
}
<style>
body {
width: 100%;
background: #000;
}
.bgimg {
z-index: -1;
overflow: hidden;
left: 70px;
position: relative;
display: block;
}
#maincontent {
height: 520px;
width: 960px;
margin: 20px auto;
display: block;
z-index: 8;
}
</style>
<body>
<div id="maincontent">
<img src="./images/bg2.png" class="bgimg" alt="some info about image here">
</div>
</body>
if you want that image inside the div use this code. or if you want make that image background of that div use css background property
I want to make a one Column Layout with 3 section
Section 1: Header
Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel
Section 3: Footer that always resides at the bottom of the browser window.
The Problem:
I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.
Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.
Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.
thanks!
http://jsbin.com/ixipug/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
#containerHeaderContent {
min-height:100%;
height: auto;
height: 100%;
margin: 0 auto -1.5em;
}
.push {
height: 1em;
}
.header {
background-color: aqua;
padding-top:20px;
}
.subheader-left {
float:left;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
float: right;
font-family: sans-serif;
font-size: 12px;
padding-right: 20px;}
.middleSection {
padding-top: 10px;
clear:both;
width:100%;
height auto;
background-color: #e8e7e7;
}
.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;
}
.bottom-left {
float: left;
font: sans-serif;
left: 20px;
}
.bottom-right {
float: right;
right: 15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div id="containerHeaderContent">
<div class="header">
<div class="subheader-left">XYZ</div>
<div class="subheader-right">LOREM</div>
</div>
<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div>
<div class="push"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — info#info.com
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
2018 update
use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:
body, html { padding: 0; margin: 0; }
header { background: #faa; }
article { background: #afa; }
footer { background: #aaf; }
.page {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
article {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
<div class="page">
<header>header content</header>
<article>main content</article>
<footer>footer content</footer>
</div>
No need to use tables! Some simple css will do nicely.
DEMO: http://jsbin.com/azivip/2/edit
Html Markup:
<body>
<div id="content">
<div id="header">
This is the header
</div>
<div id="inner">
This is the body
</div>
<div id="footer">
this is the footer
</div>
</div>
</body>
CSS:
body{
height:100%;
padding:0px;
margin:0px;
}
#content{
position:relative;
bottom:0px;
width:100%;
height:100%;
}
#header{
position:relative;
bottom:0px;
width:100%;
height:100px; /* Edit for height of header*/
background:#f00;
}
#inner{
width:100%;
text-align:center;
position: absolute;
top: 50%;
display: table-cell;
vertical-align: middle;
}
#footer{
position:absolute;
bottom:0px;
width:100%;
height:100px; /* Edit for height of footer */
background:#0f0;
}
In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.
var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
<table> is what you need to use in this case. The HTML will look like this, basically:
<table class = "wrapper">
<tr><td class = "header">I'm the header.</td></tr>
<tr><td valign = "middle" class = "content">Some content. Some content. More content. More content. Content is great. Content is a great thing to talk about when trying to insert random content to elaborate behavior. Content.</td></tr>
<tr><td class = "footer">I'm the footer.</td></tr>
</table>
Example CSS:
html, body, .wrapper {
height: 100%;
}
.header {
height: 100px; /*This value can be anything*/
}
.content {
text-align: center;
}
.footer {
height: 100px;
}
Demo: jsFiddle.
Note how the content is centered both vertically and horizontally.
Hope that helped!