I am working on a small site. To make it easier to read I pushed all the content of the site into the center with.
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
The problem is that the div follows this rule and is only in the very center.
In the footer class I tried resetting the margins and width by setting them back to 100% but that didn't work.
.footer {
width: 100%;
margin-left: 0%;
margin-right: 100%;
}
CodePen
Instead of setting the entire body to 500px width, create a div for your main content, and then place the footer underneath.
#content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
<body>
<div id="content">
<!-- Main page content here -->
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
Either place the .footer element outside of the wrapper element:
Example Here
In this case, use an element other than the body to function as the wrapper/container. I used an element with class .container:
.container {
width: 500px;
margin-left: auto;
margin-right: auto;
}
As an alternative, you could also absolutely position the .footer element and add left: 0; right: 0; in order for it take up the entire width of the page:
Example Here
.footer {
position: absolute;
left: 0;
right: 0;
}
Try moving the css from your body into a containing <div> and put all your content in that and have your footer below the containing <div> and if the element is unique use ids not class
e.g.
HTML:
<body>
<div id="mainContent">
<!-- Main site stuff here -->
</div>
<div id="footer">
<!-- footer info here-->
</div>
CSS:
body{
/*No CSS*/
}
#mainContent{
width: 500px;
margin-left: auto;
margin-right: auto;
}
#footer {
width: 100%;
margin: 0;
}
Related
I'm new at coding and I've managed to figure out some things, but this one is bugging me deeply as I can't seem to find a solution.
I have an horizontal & vertically centered div on a page. I want to place a header on top of it, without decentering the main div.
How it looks like now (both are centered as a whole):
How I want it to look (yellow is centered, blue header on top):
..
Basic code:
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin-left: auto;
margin-right: auto;
}
.main {
width: 1000px;
height: 500px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
This is most likely not the best answer, but it's a start.
Baisically I centered the container using this method. Then I added the -50px to the top attribute of the container (half of the header height), moving the container 50px upwards, making the content div totally centered again. This solution should work on most newer browsers, but has some "limits" more here.
HTML
<div class="centered-container">
<div class="header">
header stuff
</div>
<div class="content">
Content stuff here.
</div>
</div>
CSS
body {
background: #600;
}
.centered-container {
position: absolute;
left: 50%;
top: 50%;
top: calc(50% - 50px);
transform: translate(-50%, -50%);
width: 600px;
background: red;
color: white;
text-align: center;
}
.header {
height:100px;
background:blue;
}
.content {
height:300px;
background:teal;
}
fiddle here.
I made the content 600px wide and 300px high and header 100px high, just so it is easier to see.
The negative margin
<!DOCTYPE html>
<html>
<!-- Handles the init code(javascript,css,links) and style references -->
<!-- Also, use body and head tags (THEY ARE IMPORTANT) -->
<head>
<style>
/** Web browsers load whatever is in the <head> tag FIRST
*/
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
/* You can use "margin: 0 auto;" to center this object.
* No need for left and right margin centering.
*
* Also, set the position to be relative then try adding your heading object
*/
.header {
width: 1000px;
height: 100px;
background-color: blue;
margin: 0 auto;
position: relative;
}
/* You don't need the margin to be 0 auto on both right and left
* if you have the width 100%
*/
.main {
width: 100%;
height: 500px;
background-color: yellow;
margin: 0;
}
</style>
</head>
<!-- Everything In Body Tag is style elements or skeletal HTML (div's, span's, format)-->
<!-- Place the heading OUTSIDE of the header element (in the outer div) this shouldn't alter the position of the
header. -->
<body>
<div class="outer">
<div class="middle">
<div class="header"></div>
<div class="main">
</div>
</div>
</div>
</body>
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I want that my footer is on the bottom of the page, but it won't work. There is always a scrollbar, why is that?
http://www.yannickluijten.be/luc/website/
#top {
position: relative;
width: 100%;
height: 50px;
background: #00aeef;
}
#wrapper {
position: relative;
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
#footerbg {
width: 100%;
height: 20px;
background: #d7d7d7;
}
.push {
height: 20px;
}
<div id="top"></div>
<div id="wrapper">
<div class="push"></div>
</div>
<div id="footerbg"></div>
the wrapper should be a container for the content
Have a look here: http://jsfiddle.net/F577v/
<div id="top"></div>
<div id="wrapper">
<div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>
I made the footer snap to the bottom outside of the wrapper, if you want to move the top outside that is also fine but remember you will have to adjust the bottom padding to compensate for its height too.
view the updated code here: http://jsfiddle.net/F577v/2/
Try the updated version: http://jsfiddle.net/F577v/8/
First of all, your containers don't need to be relative position.
Second of all, footer should be centered by setting a width and left/right margins to auto:
#footerbg {
width: 960px;
....
margin-left: auto;
margin-right: auto;
}
You have 2 options:
1) put the footerbg inside the wrapper
2) put in the footerbg the same style as in wrapper (same width & margin values)
Im trying to get a footer to stick to the bottom of my webpage but it floats only half way up. I've looked at a few examples and I cant see what im doing wrong. Any assistance would be greatly appreciated. My simplified code is shown below.
<html>
<head>
</head>
<body>
<div id = "wrapper">
<!--Wrapper div for the main content-->
</div>
<!--Footer container-->
<div class="footer">
</div>
</body>
</html>
--CSS--
body
{
height: 100%;
margin: 0;
padding:0;
background-color: #1A1F2B;
min-width: 960px;
}
#wrapper{
min-height: 100%;
}
.footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
display: block;
background-color: #232A3B;
}
If you want it to be at the bottom of the document:
.footer {
position: absolute;
bottom: 0;
}
If you want it to be at the bottom of the viewport:
.footer {
position: fixed;
bottom: 0;
}
If you'd like the footer div to be on the bottom of the page and span the entire width this would work:
.footer {
position: absolute;
bottom:0;
height: 150px;
width: 100%;
background-color: #232A3B;
}
HTML5 also supports the <footer> Tag which may make it easier for bots to process the information on your webpage. To change that just use footer { instead of .footer { and change the HTML markup.
Ok so I know this topic has many questions, but I still haven't been able to figure exactly how to make this work. This is close to the problem, but its not working for me.
I want my page to have 100% height. Inside this page is a static header of height 40px, and then content that takes the remaining height (100% - 40px).
HTML:
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
CSS:
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
}
#header
{
height: 40px;
}
#content
{
height: 100%;
position: absolute;
top: 0;
padding-top: 40px;
}
This is an explanation of the code:
I added position: absolute to content because otherwise it would not take up 100% of its container #page for some reason
Then the problem was that it exceeds the boundaries of the page, which is why I added top: 0.
Then the contents of #content overlaps with the header so I added padding-top: 40px
Now the #content exceeds the boundaries of the page again
Any suggestions? Thanks.
This should work:
http://jsfiddle.net/94JNZ/1/
#content
{
height: auto;
width: 100%;
position: absolute;
top: 40px;
bottom: 0;
}
You can use box-sizing property for this
Check this:
http://jsfiddle.net/Gn8zN/1/
Another simple & best solution
Check this:
http://jsfiddle.net/B8J2H/
Here is an article about this problem. CSS 100% height problem
You can see the example page has a perfect 100% layout what header and footer.
It uses relative position and not absolute.
Use flex:1;
html, body
{
height: 100%;
margin: 0px;
}
#page
{
min-height: 100%;
display: flex;
flex-direction: column;
}
#header
{
display: flex;
height: 40px;
background-color:red;
}
#content
{
display: flex;
flex: 1;
background-color:blue;
}
<body>
<div id="page">
<div id="header">
header
</div>
<div id="content">
content
</div>
</div>
</body>
Just script it:
<script type="text/javascript">
function contentSize()
{
document.getElementById('content').style.height=(window.availHeight-40)+"px";
}
onload=contentSize;
onresize=contentSize;
<script>