Could someone please help me position my footer correctly in my webpage?
I have the following layout:
This is how I want the footer to behave:
The footer should be positioned at the bottom of the page when the content is empty.
The footer should be 'pushed' down when the content exceeds the height of the page.
here is my HTML:
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
#RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
Please note the following:
The content and header is contained in a 'Div' called 'page-container'.
The content is made up of two Divs which are floated to the left and right of the content area.
The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)
I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.
The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).
Update
I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.
Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).
I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!
A quick google search gave me a few links that you'll find useful.
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I would stick to with the first one, but either should do what you want.
I made a fiddle: http://jsfiddle.net/karlroos/ZVkYC/ (sorry for the badly organized CSS)
Take a look. You'll have to make some workaround for the min-height: 100%; in older versions of IE, presumably with JavaScript.
As mentioned in the edit to my post, I ended up having to alter my HTML slightly:
<body>
<div id="page-container" >
<div id="menu">
<div>
</div>
</div>
<div id="layout-container">
<div id="header">
<h1>Website title</h1>
</div>
<div id="content">
#RenderBody()
</div>
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
</div>
<div id="footer">
</div>
My CSS is based on CSS found here (This same link was posted by a couple of people but I was already using this anyway!)
The solution is about 99% effective. My footer sticks to the bottom of my page when the content area is empty and is also pushed down when the content grows larger than the screen but I now have a permanent scrollbar as my page height seems to be off (moving the mouse-wheel scrolls the page up and down by a single pixel).
I have so far been unable to get rid of this so I am begrudgingly accepting this as a complete solution unless anyone else can point me in the right direction.
Update
It seems the 1 pixel offset was caused by my footer having a 1 pixel top border. I simply adjusted my CSS to account for this and the scrollbar disappears when the content does not completely fill the screen.
#footer {
margin-top: -151px;
height: 150px;
}
Try editing your CSS to include something like the following:
#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
}
Then call it in your footer.
Wrap your div-s in a wrapper:
#wrapper {
width:100%;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
and use the following CSS for your footer:
#footer {
width: 100%;
height: 80px;
background-color: #ccc;
position:absolute;
bottom: 0;
}
Have you tried setting the body to position:relative and the footer to position:absolute with bottom:0 ?
Related
Tools: CSS and Flexbox
Note: This question is strictly a CSS/Flexbox aesthetics question
Problem: My footer will not stay planted these days.It shrinks and slips off the page as you resize vertically.
I use to have a nice Holy-Grail layout and the header and footer stayed in their places as you shrunk the window vertically while the middle content gave way.
Life was great- until I translated my CSS into React's JSX style, which has forced me to wrap an extra div around my footer.
Before when life was great:
<div class="main-container"> /*flex-direction:column
<div class="header">
<div class="canvas"> /*my pretty flex rows*/
<div class="footer">
After translation ruined my week:
<div class="main-container"> /*flex-direction:column
<div class="header">
<div class="extra-container"> /*dang you React*/
<div class="canvas">
<div class="footer">
You can check out this puzzle here http://jsfiddle.net/wd6o22dr/
The Brain Teaser for you Front-End Masters:
Considering that keeping that "extra-container" is a must, how do you keep the footer from shrinking and slipping off the page as you resize the page vertically?
Considering that keeping that "extra-container" is a must, how do you
keep the footer from shrinking and slipping off the page as you resize
the page vertically?
One option you have is absolute positioning.
HTML
No changes.
CSS
Add four rules to existing declaration block.
#footer {
height: 50px;
border: 1px solid black;
background-color: black;
position: absolute; /* NEW */
bottom: 0; /* NEW */
z-index: 1; /* NEW */
width: 100%; /* NEW */
}
DEMO: http://jsfiddle.net/wd6o22dr/1/
Please, consider the following jsFiddle - http://jsfiddle.net/mark69_fnd/hwCuB/ (you can find the code after the body of the question).
It represents a trivial example of the classic header, content, footer HTML layout. Notice that:
The content never overlaps with the footer. Resizing the window will finally create a vertical scrollbar rather than move the content over the footer.
There are no redundant scrollbars.
No absolute heights, except of the footer, which may be assumed to be no higher than 2em.
The content height is less than the available height between the header and the footer.
I would like to keep the first three properties, but change the last one, so that the content height is the full height between the header and the footer. And I would like to do so without resorting to javascript.
How can I do so, if at all?
EDIT
The given html and css are just an example. You are free to change them as long as the final result satisfies the conditions of my question.
EDIT2
Apparently, I am not very clear on what I want to achieve with the content. Here is what I have now:
Notice how the content does not extend the full height available to it between the header and the footer.
What I am after is this:
(edited in mspaint, I do not know to do it really)
EDIT3
Added an except clause to the 3rd condition:
except of the footer, which may be assumed to be no higher than 2em.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.7.3/build/cssreset/reset-min.css">
</head>
<body>
<div class="container">
<div class="header">
Header goes here.
</div>
<div class="content">
<div class="innerWrapper">
Content goes here.
</div>
</div>
<div class="footer">
<div class="status">
Footer goes here.
<div>
</div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
width: 100%;
}
.container {
position: relative; /* needed for footer positioning*/
margin: 0 auto;
height: auto;
min-height: 100%;
background-color: #ddd;
}
.content {
padding: 0em 0em 2em; /* bottom padding for footer */
background-color: #bbb;
}
.footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
}
.status, .header {
background-color: #999;
border: solid 1px #000000;
}
There might be couple ways to do this, but the only ways i can think of at the moment all involve setting/knowing the height of your header and footer.
Here is one using display:table http://jsfiddle.net/fLnkf/
There may be other solutions depending on if your requirements allow you to change your html or use CSS3.
hope this helps!
EDIT 2:
There was an error in my code that was causing the footer to not stick to the bottom of the page. My code looked something like this:
<div id="footer">
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Lorum Ipsum</p>
</div>
</div>
</div>
</div>
I removed <div id="footer"> and moved those CSS properties to id="copyright-bg" and it then began to stick properly to the bottom. But now there has risen another issue! I now have unnecessary scroll bars! Here is a Fiddle that has the barest of code to attempt to figure what is going on. I thought it could be the gradient but when I changed the code to a solid background the scroll bars still appeared.
Note: I have tested in Chrome and Firefox.
EDIT:
I have attempted to use the CSS Sticky Footer per instructions on the website.
I assume there is a conflict in my CSS(?) here is a Fiddle of the page.
I have also attempted what this website suggested and while it technically works it creates scrollbars! I would like to avoid that if possible.
Original Question
I am working on a page and if the page does not have much content (IE no scroll bars for the page) I am left with a black bar below my copyright container.
Here is a screenshot:
Note: Where you see the word Done is the bottom of my browser, an arrow is pointing to the black bar.
I have attempted a few things to remove the bar. When I add height: 100%; to the body tag it will take my background gradient and it will reach to the bottom of the page but again that doesn't look good. I then attempted to add height: 100% to the copyright container. That caused the gray area to stretch way down and cause excessive empty space and scrollbars. I have attempted to position the element absolutely but that causes several other issues and would prefer to avoid positioning absolutely.
How do I remove the black bar? (Preferably with just CSS but will accept an answer that uses jQuery/Javascript)
CODE:
HTML:
<!-- Body Content Is Here -->
<div id="copyright-bg" class="container">
<div class="row">
<div class="twelvecol">
<p class="copyright-text">Ipsum</p>
</div>
</div>
</div>
CSS:
html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
margin: 0;
padding: 0;
text-align: justify;
background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%);
/* Vendor Specific Background Gradients... */
}
#copyright-bg{
margin-top:1.875em;
background: none repeat scroll 0 0 #666666;
border-top: 5px solid #E31836;
padding:1.250em;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.row .twelvecol {
width: 100%;
float: left;
}
If you have tried multiple solutions (like Ryan Fait's footer or the CSS Sticky Footer (this link is broken, see this instead), which is my favorite) then I would bet that you have a bigger problem than face value. Those two examples have proven the test of time and yet still remain the most commonly used methods for creating a footer which sticks to the bottom of the page. While I'm not bashing your code, I would suggest that maybe you redo the page you're creating from scratch and have the first implementation be the sticky footer. From there you should just be able to copy and paste over your visual styles and if it screws up again then you know your culprit line of code.
EDIT:
I needed to edit your code a bit because the lack of indentation made it difficult to read. Here's the new jsFiddle. What I did change were a few things. Here's the additions to the top of your CSS code:
* {margin:0;padding:0;}
html, body {height: 100%;}
#content-wrap {min-height: 100%;}
Those lines are 100% necessary to make your code work. Not only do you need to do a wildcard (*) reset on all elements, but you also need to tell the document (html) and the body (body) to take up the full height of the screen. I don't remember if it was in your original CSS, but #content-wrap should have a min-height of 100% as well.
After searching through, I realize your footer isn't actually 180px in height, but rather 100px in height. Here's the final jsFiddle. And also, here's the final code to make the footer stick:
#main {overflow:auto;
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;}
You should see now that when you apply this code, the footer sticks to the bottom (and does so without duct tape). Hope this helps!
Majority of the sticky footer codes seem to cause issues with my page. To work around this issue I am using the following code:
HTML
<body>
<div id="page-content">
<header>
<!-- Header Content Goes Here -->
</header>
<!-- Page Content Goes Here -->
<footer>
<!-- Footer Content Goes Here -->
</footer>
</div>
</body>
JS
$(function() {
var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
$("#page-content").css("min-height",height+"px");
});
What this does is calculate the height of the page and set a minimum height for the page, thus sticking the footer to the bottom. It works beautifully.
Note: I am using HTML5.
I have a couple of list elements and in there I have 2 div's floating left. I want that when the sencond div gets more content that the div left to it automaticly gets the same height.
I have both divs in a different bg color so when 1 has less content then the other, the div gets higher and the bg dont match horizontaly.
Maby you could take a quick peek at the website, then you know exactly what I mean,
http://newsbreak.vazcreations.nl (top middle container is the problem).
Thanks in advance
This problem can be solved reasonably easily without javascript. It's recommended that you don't use javascript to achieve something if it's avoidable as not all users have javascript enabled.
The technique that is employed to solve your problem, without using javascript, is called Faux Columns (this article goes one step further and uses images, but you don't need to.
Essentially you place the div on the right inside the left div. Set the width of the left div to the ideal total width of both divs, and then float the right div to the right. You may need to apply a clearfix to the left div so that is properly wraps around the second div.
Edit: I've just come across an article which proposes a few other solutions which seem to be worth looking into.
I think something like this should work:
EDIT: This is probably a better solution
<style type="text/css">
#container {
display:table;
border-collapse:collapse;
}
#layout {
display:table-row;
}
#left-sidebar, #right-sidebar, #content {
text-align:left;
display:table-cell;
}
</style>
<div id="container">
<div id="layout">
<div id="left-sidebar">
<!-- left sidebar-->
</div>
<div id="content">
<!-- content -->
</div>
<div id="right-sidebar">
<!-- right sidebar -->
</div>
</div>
</div>
See this jsFiddle for a demonstration: http://jsfiddle.net/Qhk7R/
You could fake it with changing this:
.recent-item {
height: 50px;
list-style: none;
float: left;
}
to
.recent-item {
height: 50px;
list-style: none;
float: left;
background-color: #CDCDCD;
margin-top: 5px;
}
and removing the top margin for .main-date and .recent-bericht
Use jQuery:
var div_1_height = $('.div-1').height();
$('.div-2).height(div_1_height);
I am creating a website that has a jquery image slideshow as the background, and on top of the slideshow is a navigation bar, a blank area in the middle of the page so that the image shows through, and at the bottom underneath the slideshow is some content and a footer. Similar to Need Supply's current website (http://needsupply.com/).
My main difficulty, is that I'd like to have the images in the slideshow clickable but since the slideshow is behind all of the divs (z-index: -1), it cannot catch any clicks since it's being covered by my main content divs (page, header, footer).
I tried replacing the slideshow with a simple linked image but it still cannot be clicked, so I know it is not anything to do with the slideshow code.
Here is the basic structure of my site:
<body>
<div id="slideshow">
....
</div>
<div id="page">
<div id="header">My Header</div>
<div id="content">Some Content</div>
<div id="footer">My Footer</div>
</div>
</body>
css:
#slideshow{
width:100%;
height: 620px;
position: absolute;
top:0;
left:0;
z-index:0;
}
#page{
width: 980px;
margin: 0 auto 2px auto;
}
Any help would be greatly appreciated. Let me know if you need any more information on my end.
You just need to remove the #page wrapper and position #content and #footer absolutely at the bottom. That way there would be no div covering the main area of the images (#slideshow) and so you would be able to click it. The #page, #content and #footer divs would remain unclickable.