I have had a lot of trouble with my footer and my page content, and am trying to find the correct way to do this. I have my footer at the bottom of the page, but when I add content it overflows the container, please help me.
CSS:
#container {
width: 75%;
height:100%;
margin:0 auto;
background-color:black;
margin-top:10px;
margin-bottom:10px;
padding:10px;
opacity:0.8;
#content {
width:100%;
}
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 115px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<body>
<div id='container'>
<?php
include 'navfoot/navbar.php'
?>
<div id='content'>
<div id='paragraph'>
<p>Eventually our website will be advanced enough for us to have a news feed! But until then we suck!</p>
</div>
</div>
<?php
include 'navfoot/footer.php'
?>
</div>
It depends on how you want the footer to act (fixed at bottom always, or relative to the content). But from what it sounds like, try adding this to your footer CSS:
footer {
background-color: black;
position: fixed;
}
That will keep it fixed and at the bottom of the page (in Chrome, at least). Otherwise, make the position: relative of the footer and that will sink it to the bottom of the content.
Your container and footer are set to 75% width and your content is set to 100% width. That could be why it's going past the container/footer. It depends on the order. The absolute positioning on the footer could be causing it. You could try changing to relative.
Please post a mock-up of what you are trying to achieve and the HTML to what you have now.
If you are using PHP includes, we need to see what those are. Lots of variables that can cause content to break.
If the issue happens when you are resizing your browser, it's because the paragraph ID (#paragraph) has a fixed width of 500px and everything else is percentages.
Fixed on the footer will not resolve the text flowing on top of it.
Related
My problem is that I have a web page with a footer. I would like the page to extend the footer to the bottom of the browser window if there is not enough content to fill the entire page. I would also like the footer to go to the very bottom of the page when the content exceeds the height of the browser and there is a vertical scroll bar.
For some reason I cannot get this to work, I followed the tutorial on this page: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
and the tutorial specifically says it does what I want-
"On long pages with lots of content the footer is pushed off the visible page to the very bottom. Just like a normal website, it will come into view when you scroll all the way down. This means that the footer isn’t always taking up precious reading space."
When I follow the tutorial it successfully puts the footer on the bottom of the page when there is not enough content to fill the page, but when there is more than enough content the footer is prematurely placed where the browser window initially ends because the body's and the everything container's heights are set to the height of the window as opposed to the height of the entire page (height of page with with scrolling).
the div organization is as follows:
<div class="everything">
<div class="main_content"></div>
<div class="template_footer"></div>
</div>
My CSS code:
html, body {
margin:0;
padding:0;
height:100%;
}
.everything{ //main container
width:100%;
min-width:960px;
max-width:1450px;
margin-left:auto;
margin-right:auto;
min-height:100%;
position:relative;
}
.main_content{ //body container
width:100%;
position:relative;
float:left;
}
.template_footer{
width:100%;
height:44px;
background-color:rgba(0, 0, 0, .5);
position:absolute;
bottom:0;
}
I've also tried a bunch of different variations with height and nothing works correctly, I've searched through other questions and they don't seem to answer this problem specifically.
The footer is absolute positioned to the bottom of the .everything container.
So no matter the content, the footer will be covering the bottom 44 pixels of your container.
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
padding-bottom: 60px;
}
.footer {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
the main section padding-bottom should be bigger than the height of the footer. The footer section has to be position absolute. The whole page should be min-height 100%.
I am having an issue with the horizontal line I have placed in my footer. I have another on my header but it is working fine. The issue begun when I stuck the footer to the bottom of the page. The horizontal line displays all the way across the screen rather than just in the container.
CSS :
footer {
text-align:center;
clear:both;
color:#B05510;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
#mcp {
width:175px;
-webkit-transition: width .5s;
margin:10px;
}
#mcp:hover {
transition: width .5s;
width:225px;
}
HTML:
<footer>
<hr>
<p>Copyright © sourceblockmc.net 2014 - All Rights Reserved<br>
<a href='https://clients.mcprohosting.com/aff.php?aff=8566'><img id='mcp'
src='images/mcp.png'</a></p>
</footer>
Issue pic : http://gyazo.com/3aeede809cffb0b6cc748b5ddf2efe8a
Although I don't recommend using Absolute Positioning for your footer. Here is the solution with your code. Position absolute breaks elements out of the documents normal flow.
The solution here makes the footer 75% same as the container, and then recentering it, with margin-left and margin-right.
footer {
text-align: center;
clear: both;
color: #B05510;
width: 75%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
The problem is the following bit from your CSS file:
footer {
...
width:100%;
...
}
This is causing your footer block to stretch across the entire width of the screen. Since the text is centered, you aren't able to tell, but if the text was longer, it would also extend beyond the boundaries of the grey section.
Simply change the width setting to the pixel width of the grey background (or smaller if you want some padding) and your problem will be solved. Assuming, for example, it's 950 pixels:
footer {
...
width:950px;
...
}
Edit
Since you're also using absolute positioning, you may have issues centering the footer after making this change. View this question for a possible solution: How to center absolutely positioned element in div? or don't use position: absolute and add margin: 0 auto; to align the footer in the horizontal center.
I have been playing around with my content in order to achieve my desired effect however now my footer will not be at the bottom of the page below all content. I it is currently fixed at the bottom of the page, however this overlaps a navigation bar running down the left hand side. I have the main body of the content inside a div - main container, with the footer outside of this.
HTML for my footer:
<div class="footer">
<div class="footerContent">
<p>Copyright © 2014 www.danielparry8.com</p>
</div>
</div>
CSS for footer:
.footer {
width: 100%;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
.footerContent {
font-family: sans-serif;
color: #FFF;
float:left;
width:100%;
margin-top: 10px;
margin-bottom: 10px;
}
.footer p {
float:left; width:100%; text-align:center;
}
I understand that fixed positioning is probably not the method to use, however when I use other methods it rises towards the top of the page, and still overlaps my content.
All content is inside a main content div with the following CSS
html, body, #maincontainer { height: 100%; }
body > maincontainer { height: auto; min-height: 100%; }
This has been getting on my nerves for days and no other solutions I have browsed on here have worked, I presume their is an error in my code somewhere I just can't find it!
Thanks!
you need to change position: fixed to absolute end add bottom: 0;
footer and your unit must be located outside of the wrapper
I used a margin-bottom: <footerheight> on the body css. Might be a bit 'cheaty' but seems to work on everything I tried.
Okay, so I'm having rather annoying problems with what should be simple code, I've searched for duplicates but it appears to be different in a slight way. Here's my basic layout:
html:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
css:
html,body,#wrapper {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
position: relative;
}
#header {
position: fixed;
top: 0px;
height: 40px;
width: 100%;
color: white;
background-color: #000000;
}
#content {
position: fixed;
padding-bottom: 50px; /* to match the footer height*/
top: 40px;
bottom: 50px;
height: 100%;
width: 100%;
overflow: auto;
}
#footer {
position: fixed;
bottom: 0px;
height: 49px;
width: 100%;
border-top: 1px solid #000000;
background-color: skyblue;
font-weight: bold;
}
The idea is that the 3 divs inside the wrapper take up 100% of the page - in other words: all them are always in view. Header up top, footer on the bottom and content in the middle respectively.
The footer and header can be fixed size (be it pixels or % of page height), the content I want to automatically take up the rest of the page.
The problem is that the page can be of many different resolutions(so content can't be of fixed height, unless I use javasript). Another thing is that the content div can have variable amount of elements, meaning it has to allow the scrolling of the content while keeping both header and footer in view. The main part is: the scroll-wheel must be inside the content div, not page-wide.
I almost have what I want with this css, but some of the content can't be scrolled to when they overflows content div (I'm talking vertical overflows - there will be no horizontal ones). I would really appreciate some help, but this is not as easy/simple as it seems, if possible at all as I think you need a fixed height for overflow: auto.
I want a pure css solution, if possible, so don't mention JqueryMobile to me (or ever).
Here's how it looks right now, notice the scroll-wheel problem on the content div:
I hate when this happens...I found the solution just after I posted, decided to try one more thing: I've set the #content height to 'auto' and that did it (since once I drew my own attention to the scroll-wheel, it became apparent the problem is with the div height)! Just need to test and make sure that's the case with all/most browsers!
Maybe it will be helpful to someone else though!
i am working on struts2 application.when i am dealing with jsp pages one problem is occurred, when page contents are less footer float below the contents, this will look very bad.but when contents are more than page then it automatically float to the bottom.this is ok for me. Any help will be appreciated...
the code used for footer in css is...
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
width: 100%;
}
For a sticky footer (always on the bottom of the page, no matter the height of the page), use position: fixed;
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
position: fixed;
bottom: 0;
width: 100%;
}
If you are looking for making the footer to be always visible on the browser window that doesn't get affected by scrolling then position:fixed will do. However that will look bad when the content is more and you need scrolling and still the footer stays in the viewing area overlapping the content. A clean solution is to move the footer markup outside the wrapper div. Something like should be good:
SAMPLE DEMO
CSS-
html, body {
height: 100%;
}
#wrapper {
background-color:yellow;
height: 90%; //sharing the height between wrapper and footer
margin:0px;
}
#footer {
background-color:green;
height: 10%;
min-height:20px;
max-height:40px;
}