Related
I want to have an avatar image with two divs on its right that are vertically aligned to it.
https://jsbin.com/qafiroquve/1/edit?html,css,output
I've read so many posts about this, but none of them seems to help me.
What is the best approach to having the image on the left with 30% of the main div's (header) width, and the info div with 70% of it?
If either of the info divs (name or position) has too much text, I want the info div to get vertically aligned to the image on its left.
I also want this info div to have a margin with the image.
I've tried so many options: float: left on avatar div, display: inline-block on both avatar and info, width: 30% and 40% . I don't want to use bootstrap for this purpose as it complicates things and I want to keep it as simple as possible.
You can use either table-cell how #w3debugger suggested or you can take advantage of a quick css hack to align vertically:
.yourclass{
position:absolute;
top: 50%;
transform: translateY(-50%)
}
But that needs the parent of .yourclass to be position:relative and be of type display:block; If your parent is block it will take the height of the block that is inside it, so the avatar, that is next to .yourclass needs to be display:block as well,
I edited your example:
HTML:
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div><div class="info">
<div class="name">Important person here </div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
CSS:
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
position: relative;
}
.avatar img {
width: 30%;
border-radius: 50%;
}
.info{
box-sizing: border-box;
padding: 0 40px;
width: 70%;
position:absolute;
right: 0;
vertical-align: top;
top: 50%;
transform: translateY(-50%)
}
Live preview:
https://jsbin.com/gogewefizo/1/edit?html,css,output
Unfortunately, vertical-align didn't work with float elements. You should use display: table-cell or `display: inline-block in order to meet your requirements.
Please check the code below.
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
display: table;
}
.avatar img {
width: 150px;
}
.avatar,
.info {
display: table-cell;
vertical-align: middle;
}
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div>
<div class="info">
<div class="name">Important person here</div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
To center an HTML element I can use the CSS left: 50%;. However, this centers the element with respect to the whole window.
I have an element which is a child of a <div> element and I want to center the child with respect to this parent <div>, not the whole window.
I do not want the container <div> to have all its content centered, just the one specific child.
Set text-align:center; to the parent div, and margin:auto; to the child div.
#parent {
text-align:center;
background-color:blue;
height:400px;
width:600px;
}
.block {
height:100px;
width:200px;
text-align:left;
}
.center {
margin:auto;
background-color:green;
}
.left {
margin:auto auto auto 0;
background-color:red;
}
.right {
margin:auto 0 auto auto;
background-color:yellow;
}
<div id="parent">
<div id="child1" class="block center">
a block to align center and with text aligned left
</div>
<div id="child2" class="block left">
a block to align left and with text aligned left
</div>
<div id="child3" class="block right">
a block to align right and with text aligned left
</div>
</div>
This a good resource to center mostly anything.
http://howtocenterincss.com/
Actually this is very straightforward with CSS3 flex boxes.
.flex-container{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
justify-content: center;
align-items: center;
width: 400px;
height: 200px;
background-color: #3498db;
}
.inner-element{
width: 100px;
height: 100px;
background-color: #f1c40f;
}
<div class="flex-container">
<div class="inner-element"></div>
</div>
UPDATE:
It seems that I didn't read the OP edit at the time I wrote this answer. The above code will center all inner elements (without overlapping between them), but the OP wants just an specific element to be centered, not the other inner elements. So #Warface answer second method is more appropiate, but it still requires vertical centering:
.flex-container{
position: relative;
/* Other styling stuff */
width: 400px;
height: 200px;
background-color: #3498db;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
/* Other styling stuff */
width: 100px;
height: 100px;
background-color: #f1c40f;
}
<div class="flex-container">
<p>Other inner elements like this follows the normal flow.</p>
<div class="inner-element"></div>
</div>
CSS
body{
text-align:center;
}
.divWrapper{
width:960px //Change it the to width of the parent you want
margin: 0 auto;
text-align:left;
}
HTML
<div class="divWrapper">Tada!!</div>
This should center the div
2016 - HTML5 + CSS3 method
CSS
div#relative{
position:relative;
}
div#thisDiv{
position:absolute;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
HTML
<div id="relative">
<div id="thisDiv">Bla bla bla</div>
</div>
Fiddledlidle
https://jsfiddle.net/1z7m83dx/
You can use bootstrap flex class name like that:
<div class="d-flex justify-content-center">
// the elements you want to center
</div>
That will work even with number of elements inside.
To center only the specific child :
.parent {
height: 100px;
background-color: gray;
position: relative;
}
.child {
background-color: white;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 20px;
height:20px;
margin: auto;
}
<div class="parent">
<span class="child">hi</span>
</div>
OR, you can use flex too, but that would center all children
.parent {
height: 100px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background-color: white;
}
<div class="parent">
<span class="child">hi</span>
</div>
text-align:center; on the parent div Should do the trick
Is the div a fixed width or a fluid width? Either way, for fluid width you could use:
#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}
Or you could set the parent div to text-align:center; and the child div to text-align:left;.
And left:50%; only centers it according to the whole page when the div is set to position:absolute;. If yous set the div to left:50%; it should do it relative to the parent div's width. For fixed width, do this:
#parent {
width:500px;
}
#child {
left:50%;
margin-left:-100px;
width:200px;
}
just give the parent div position: relative
I believe the modern way to go is place-items: center in the parent container
An example can be found here: https://1linelayouts.glitch.me
If you want to use CSS3:
position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);
You might want to do further searches to figure out how to get the percentage to fit your element's width.
after flex it show essay
.container{
display:flex;
color:blue;
background-color: yellow;
justify-content:center;
}
<div class="container">
<div>Element</div>
</div>
and if you set element Center elements horizontally and vertically.
.container{
display:flex;
color:blue;
height:100px;
background-color: yellow;
justify-content:center;
align-items:center;
}
<div class="container">
<div>Element</div>
</div>
First of all you can do it with left:50% to center it relative to parent div but for that you need to learn CSS positioning.
One possible solution from many is to do something like
div.parent { text-align:center; } //will center align every thing in this div as well as in the children element
div.parent div { text-align:left;} //to restore so every thing would start from left
if your your div to be centered is positioned relatively, you can just do
.mydiv { position:relative; margin:0 auto; }
left: 50% works resectively to the nearest parent with static width assigned. Try width: 500px or something on parent div. Alternatively, make the content you need to center display:block and set left and right margins to auto.
If the child element is inline (e.g not a div, table etc) I would wrap it up inside a div or a p and make the wrapper's text align css property equal to center.
<div id="container">
This text is aligned to the left.<br>
So is this text.<br>
<div style="text-align: center">
This <button>button</button> is centered.
</div>
This text is still aligned left.
</div>
Otherwise, if the element is a block (display: block, e.g a div or a p) with a fixed width, I'd set its margin left and right css properties to auto.
<div id="container">
This text is aligned to the left.<br>
So is this text.<br>
<div style="margin: 0 auto; width: 200px; background: red; color: white;">
My parent is centered.
</div>
This text is still aligned left.
</div>
You could of course add a text-align: center to the wrapper element to make its contents centered as well.
I won't bother with positioning because IMHO its not the way to go for the OPs problem but be sure to check this link out, very helpful.
Create a new div element for your element to center, then add a class specifically for centering that element like this
<div id="myNewElement">
<div class="centered">
<input type="button" value="My Centered Button"/>
</div>
</div>
Css
.centered{
text-align:center;
}
I have found another solution
<style type="text/css">
.container {
width:600px; //set how much you want
overflow: hidden;
position: relative;
}
.containerSecond{
position: absolute;
top:0px;
left:-500%;
width:1100%;
}
.content{
width: 800px; //your content size
margin:0 auto;
}
</style>
and in body
<div class="container">
<div class="containerSecond">
<div class="content"></div>
</div>
</div>
This will center your content div whenever your container is bigger or smaller. In this case your content should be bigger than 1100% of container to not be centered, but in that case you can make with of containerSecond bigger, and it will work
Assign text-align: center; to the parent and display: inline-block; to the div.
for example, i have an article div which is inside a main content div..
Inside the article theres an image and under that image is a button, style like this:
.article {
width: whatever;
text-align: center;
float: whatever (in case you got more articles in a row);
margin: give it whatever margin you want;
}
.article {
}
/* inside the article i want the image centered */
.article img {
float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;
}
/* Now under this image in the same article element there should be a button like read more Of course you need to work with em or % when its inside a responsive design*/
.button {
background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/
}
Good luck
If you want to center elements inside a div and don't care about division size you could use Flex power. I prefer using flex and don't use exact size for elements.
<div class="outer flex">
<div class="inner">
This is the inner Content
</div>
</div>
As you can see Outer div is Flex container and Inner must be Flex item that specified with flex: 1 1 auto; for better understand you could see this simple sample. http://jsfiddle.net/QMaster/hC223/
Hope this help.
mine would like magic.
html, body {
height: 100%;
}
.flex-container{
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
<div class="flex-container">
<div>Content</div>
</div>
<html>
<head>
</head>
<style>
.out{
width:200px;
height:200px;
background-color:yellow;
}
.in{
width:100px;
height:100px;
background-color:green;
margin-top:50%;
margin-left:50%;
transform:translate(-50%,50%);
}
</style>
<body>
<div class="out">
<div class="in">
</div>
</div>
</body>
</html>
There can be a lot of ways on how you can center an element, it can be either using display properties or position or floats or margins. But normally I prefer using flexbox as it is easy and simple. I know that different people have different preferences but it depends entirely on the developer's preference and relation of the elements.
.parent{
display: block;
}
.sub-parent-1{
display: flex;
justify-content: center; //horizontal centering
align-items: center; //vertical centering
}
<body>
<div class="parent">
<div class="sub-parent-1">
<div class="child-1">...</div>
</div>
<div class="child-2">...</div>
<div class="child-3">...</div>
<div class="child-4">...</div>
<div class="child-5">...</div>
</div>
</body>
If none of those answers hit's it. Try this one.
Horizontally and vertically aligned child element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="content">
<img width="300px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Building92microsoft.jpg/800px-Building92microsoft.jpg" alt="microsoft" />
</div>
</div>
</body>
<style>
.container {
display: flex; /* can also use grid */
background-color: #47472d;
width: 500px;
height: 400px;
overflow: auto;
}
.content { margin: auto; }
</style>
</html>
I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right.
So, I have something like:
#left-element {
margin-left: 9px;
margin-top: 3px;
float:left;
width: 13px;
}
#middle-element {
margin:0 auto;
text-align: center;
width: 300px;
}
#right-element {
float:right;
width: 100px;
}
My html looks like this:
<div id="container-div">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
<div id="right-element">
I am the text in right element
</div>
</div>
Any ideas?
Thanks!
You haven't included css for your container div, but whenever it contains floating elements you should hide overflow like so:
#container {
overflow: hidden;
width: 100%; /* for good measure */
}
When you position the middle div you are setting margins that span the entire container, so any further elements are getting positioned on the line below. Note, at least for most modern browsers, further. If you reorder your elements, like so:
<div id="container">
<div id="left-element">
<img src="images/left_element.png" alt="left"/>
</div>
<div id="right-element">
I am the text in right element
</div>
<div id="middle-element">
I am the text inside the middle element
</div>
</div>
You should find it works. Better method, as I'm not quite sure whether that is supposed to work, would be to use css positioning. Apply the following css:
#container {
overflow: hidden;
width: 100%;
min-height: 36px; /* Remember absolute positioning is outside the page flow! */
position: relative;
}
#left-element {
position: absolute;
left: 9px;
top: 3px;
width: 13px;
}
#middle-element {
margin: 0 auto;
text-align: center;
width: 300px;
}
#right-element {
position: absolute;
right: 0px;
top: 0px;
width: 100px;
}
I think you problem is that you floated the left and right element but not the center one. Try something like this:
CSS:
<style>
#container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
#left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
#middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
#right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>
HTML:
<div id="container">
<div id="left-element">Left Element</div>
<div id="middle-element">Middle Element</div>
<div id="right-element">Right Element</div>
</div>
The problem is specifically that the middle div has a width set but is not floated, meaning it is still a block level element. Even though the div itself does not go the entire width of the container, it is still treated as such. You need to do 2 things - float the middle div, then clear the floats so the container grows with the height of the child divs. The clearfix method is preferred since it does not cause issues with CSS3 properties that naturally extend outside the bounds of the element they are applied to (box-shadow, text-shadow, etc).
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
I had the exact same issue. I used this approach. I made the center element display inline-block. That way I didn't have to give the elements specific width or the main container a specific height. The blocks only took up as much space as the content inside. Hope this helps.
.main-nav {
text-align: center;
padding: 2em 3em;
background: #f4f4f4;
}
#logo {
margin: 0;
width: 50px;
float: left;
margin-top: 18px;
}
#logo-link {
float: left;
display: inline-block;
}
.name {
display: inline-block;
}
.nav {
float: right;
margin-top: 18px;
}
.nav li {
float: left;
margin-right: 15px;
margin-top: 5px;
}
.nav li:last-child {
margin-right: 0;
}
<header class="clearfix">
<div class="main-nav">
<img src="img/site-logo.svg" alt="Munchies" id="logo">
<div class="name">
<h1>The Munchies Family Site</h1>
<h2>Designer</h2>
</div>
<nav class="nav clearfix">
<ul>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
strong text
I have a markup like this:
<div>
<img />
</div>
The div is higher than img:
div {
height: 100px;
}
img {
height: dynamic-value-smaller-than-100px;
}
I need the image to be in the middle of the div (have same amout of white space above and below it).
I tried this and it does not work:
div {
vertical-align: middle;
}
if your image is purely decorative, then it might be a more semantic solution to use it as a background-image. You can then specify the position of the background
background-position: center center;
If it is not decorative and constitutes valuable information then the img tag is justified. What you need to do in such case is style the containing div with the following properties:
div{
display: table-cell; vertical-align: middle
}
Read more about this technique here. Reported to not work on IE6/7 (works on IE8).
Another way is to set your line-height in the container div, and align your image to that using vertical-align: middle.
html:
<div class="container"><img></div>
css:
.container {
width: 200px; /* or whatever you want */
height: 200px; /* or whatever you want */
line-height: 200px; /* or whatever you want, should match height */
text-align: center;
}
.container > img {
vertical-align: middle;
}
It's off the top of my head. But I've used this before - it should do the trick. Works for older browsers as well.
Let's say you want to put the image (40px X 40px) on the center (horizontal and vertical) of the div class="box". So you have the following html:
<div class="box"><img /></div>
What you have to do is apply the CSS:
.box img {
position: absolute;
top: 50%;
margin-top: -20px;
left: 50%;
margin-left: -20px;
}
Your div can even change it's size, the image will always be on the center of it.
This is a solution I've used before to accomplish vertical centering in CSS. This works in all the modern browsers.
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Excerpt:
<div style="display: table; height: 400px; position: relative; overflow: hidden;">
<div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
<div style="position: relative; top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
(Inline styles for demonstration purposes)
Another option is to set display:block on the img and then set margin: 0px auto;
img{
display: block;
margin: 0px auto;
}
As I too am constantly being let down by cross-browser CSS, I'd like to offer a JQuery solution here. This takes the height of each image's parent div, divide it by two and set it as a top margin between the image and the div:
$('div img').each(function() {
m = Math.floor(($(this).parent('div').height() - $(this).height())/2);
mp = m+"px";
$(this).css("margin-top",mp);
});
There are five possible ways for centering an image with any size with pure CSS.
Using flex and making the img tag be inside (best solution for modern browsers):
div {
display: flex;
align-items: center;
justify-content: center
}
Putting the image in background-image and using background-position (as #pixeline explained):
div {
background-image: url(...);
background-position:center center
}
Using display: table for parent element, and using display: table-cell with vertical-align: middle for child element:
div.parent {
display: table;
}
div.child {
display: table-cell;
vertical-align: middle;
}
Using position:absolute with transform for the image and parent element position be not unset:
div {
position: relative;
}
div > img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Using line-height as same height of the element, then using vertical-align (in my opinion, the best solution for supporting more browsers like IE9>).
Note: In some old browsers, sometimes for using this way safely, you need to have at least one character in the line that the image exist. For fixing this issue, I used a non-breakable space in a pseudo-element of the parent.
As in the following example:
div {
display: block;
height: 200px;
width: 200px;
background-color: purple;
line-height: 200px;
text-align: center;
}
div:after {
content: "\a0";
}
div > img {
vertical-align: middle;
}
<div><img src="https://via.placeholder.com/100.png/09f/fff" /></div>
I've posted about vertical alignment it in cross-browser way (Vertically center multiple boxes with CSS)
Create one-cell table. Only table has cross-browser vertical-align
image to be in the middle of the div
div img{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
height:50px;
width:50px;
}
In your example, the div's height is static and the image's height is static. Give the image a margin-top value of ( div_height - image_height ) / 2
If the image is 50px, then
img {
margin-top: 25px;
}
Have you tried setting margin on the div? e.g.
div {
padding: 25px, 0
}
for top and bottom. You may also be able to use a percentage:
div {
padding: 25%, 0
}
<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;">
<img src="imges/import.jpg" width="200" height="200"/>
</div>
The accepted answer did not work for me. vertical-align needs a partner so that they can be aligned at their centers. So I created an empty div with full height of the parent div but with no width for the image to align with. inline-block is needed for both objects to stay in one line.
<div>
<div class="placeholder"></div>
<img />
</div>
CSS:
.class {
height: 100%;
width: 0%;
vertical-align: middle;
display: inline-block
}
img {
display: inline-block;
vertical-align: middle;
}
div {
width:200px;
height:150px;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:box;
box-pack:center;
box-align:center;
}
<div>
<img src="images/logo.png" />
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function ($) {
$.fn.verticalAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah)/2);
$(this).css('margin-top', mh);
});
};
})(jQuery);
$(document).ready(function(e) {
$('.in').verticalAlign();
});
</script>
<style type="text/css">
body { margin:0; padding:0;}
.divWrap { width:100%;}
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; }
.in { width:100px; height:100px; background:#CCC; margin:0 auto; }
</style>
</head>
<body>
<div class="divWrap">
<div class="out">
<div class="in">
</div>
</div>
</div>
</body>
</html>
If you want content to be what ever you need to have inside a div, this did the job for me:
<div style="
display: table-cell;
vertical-align: middle;
background-color: blue;
width: ...px;
height: ...px;
">
<div style="
margin: auto;
display: block;
width: fit-content;
">
<!-- CONTENT -->
<img src="...">
<p> some text </p>
</div>
</div>
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>