AIM : I want to position footer based on many factors. It can be found here
1) I want to position the footer at the bottom of the screen if there is no content(or may be 1 or 2 lines) on my page. (footer visible without scrolling down - no scrollbars)
2) My footer has to be relatively placed below the last line of content if there is so much content in my page. So footer should adjust its position according to the content.
Note : The footer has to be consistent on different systems with different screen size/resolution... (a netbook is different from a laptop in its screen size).
Other INFO ----> There is a #footer_outer inside which the #footer lies.
#frame {
margin:0 auto;
width:962px;
margin-top:10px;
height:auto;
}
#content {
padding:5px 5px 5px 5px;
margin:0 auto;
width:890px;
height:auto;
min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */
}
#footer_outer{
width:100%;
background:#444;
padding:10px 0 0 0;
height: 130px;
position:relative; /*to put footer_outer 50px below the content*/
top: 50px;
bottom:0px;
}
#footer {
margin:0 auto;
width:834px;
height:auto;
overflow:hidden;
}
Please help me in making changes to this CSS. Thank you very much!
<style>
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* fix negative height */
}
#footer, #push {
height: 100px; /* fix positive height */
clear: both;
background:#000;
}
</style>
<div id="wrapper">
<p>content here.</p>
<div id="push"></div>
</div>
<div id="footer">
footer
</div>
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
checkout this 5 different solutions and pick the best for you
1 to 4 can be found here
another one here
Due to the content being of variable lengths I can't see any other way than using JavaScript, especially if you want it different for different screen sizes. You'd need to first check the viewport height, then the height of #content, and do the maths to fit the footer where you want based on those numbers
Try to define your page container like this: height:100%; position:relative;
then, inside that container, place your footer div width, position:absolute; bottom: 0px;
Related
Pretty new to html and css and i'm just having the problem described in the title. My nav is pushing down div with the id main.
nav{
width:120px;
float:left;
margin:0px 5px 0px 5px;
#main{
display:inline-block;
padding: 1em;
float:left;
position:relative;
min-width: 900px;
Any help is appreciated, cheers.
edit:
Hi guys, maybe i should explain it better. On the page there is a nav to the left and a div to the right of it. When the windows width is made smaller the div to the right is being pushed below the nav instead of stay where it is and it's content being displayed off the screen.
You have explicitly told your element to behave like that. When you set min-width and a width in pixels, you are telling your elements to stay the same size no matter what happens. Remove min-width and set width to a percentage value like 1% instead of 50px like this:
nav {
width: 50%;
background: red;
height: 50px;
float:left;
}
#main {
display: inline-block;
height:50px;
float:left;
position: relative;
width: 50%;
background: black;
}
body {
margin: 0;
}
<nav></nav>
<div id="main"></div>
I have been created simple web page, using html5 and css, css3.
I have created sticky footer, Here is the code:
#footer {
position:absolute;
bottom:0;
color:#000;
width:100%;
height:60px; /* Height of the footer */
background:#fff;
}
and wrap and header styles:
#wrap
{
width:100%;
}
header
{
width:960px;
margin:0 auto;
}
from my above code, my page look like this: http://s2.postimg.org/6t4qokwxl/Untitled_1_copy.png
I need to show footer as full width, but when i remove margin:0 auto; from header, the footer shows exactly full-width and didn't show header properly.
I need to show except footer width as 960px; and footer need to as full-width.
I am struggling , can anyone help me? Thanks in advance.
It's hard to answer without knowing how your HTML is structured, but judging from the screenshot, you need to add left: 0to the footer CSS, otherwise it will have its left position at the same left edge as its nearest containing block (which looks like it is the #wrap element).
Tip: next time, include a link to a running code example with your post. :-)
You have to do as per this fiddle : http://jsfiddle.net/u9he2jjp/
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
I'm looking to construct a two-column layout with a fixed left column and a fluid right, both with 100% height, like this example:
I've tried so many variations I can't remember what I've tried now, and just can't get it to look right. I've also tried looking at websites such as LayoutGala but they don't have any example with both columns having a 100% height.
I can't remember what I have tried already but this was definitely my last attempt. I know this because this was the last visited web page before I was arrested for throwing a computer monitor from the fourth floor of an apartment block.
body { margin:0; padding:0; }
.left-column { position:absolute; top:0; width:235px; height:100%; background:#090909; }
.right-column { margin-left:235px; background:yellow; height:100%; width:100%; }
<div class="page-wrapper">
<div class="left-column"></div>
<div class="right-columnr">
sd
</div>
</div>
This is the result here:
MyFiddle
I'm so used to my 960 wide centered website, that when it came to a full screen fluid layout, it completely threw me. Any help greatly appreciated.
First, you need to fix right-columnr typo, Second: when you set a height of 100% on a element to take the entire height of screen, its parent should have a height of 100% too:
CSS:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.page-wrapper {
height: 100%;
position: relative;
}
.left-column {
position:fixed; /* <-- fixes the left panel to prevent from scrolling */
top:0;
left:0;
width:235px;
height:100%;
background:#090909;
}
.right-column {
margin-left:235px;
background:yellow;
min-height:100%; /* <-- fixes the background-color issue when content grows */
}
HTML:
<div class="page-wrapper">
<div class="left-column"></div>
<div class="right-column">
This is the content.
</div>
</div>
JSBin Demo
IF You really want your columns to have 100% height then You must set 100% height on body and html elements.
This works:
html {height: 100%}
body {height: 100%}
.page-wrapper {height: 100%} /* This element is redundant unless You know You will need it in future for something */
.left-column {float: left; width: 235px; height: 100%}
.right-column {overflow: hidden; height: 100%}
Edit:
Demo based on Your code: http://jsfiddle.net/YL8Eh/
I structured my site like this:
<body>
<div class="main">
<div class="header">
content
</div>
<div class="section">
content
</div>
<div class="sidebar">
content
</div>
<div class="clearing"></div>
<div class="footer">
content
</div>
</div>
</body>
and the css
.main {
position:relative;
width:908px;
margin-top:0px;
border:solid 0px;
margin:0 auto;
}
.header {
position:relative;
height:200px;
margin: auto;
}
div.section {
float:left;
position:absolute;
width: 584px;
height:500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
div.sidebar{
float:right;
position:relative;
width: 324px;
height:500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
.clearing {
clear:both;
}
.footer {
position:relative;
left:0px;
top:0px;
width:908px;
height:300px;
}
When I add content to the div section, I goes all over the footer. The footer is fixed at that point, and as content is added, the page grows and the footer remains still.
What I have to do everytime I add content is to increase in the css file either the height of the section or the height of the sidebar - either one would work - but I increase both heights (section and sidebar) to the same value, because it seems the right thing to do. The footer then is pushed down as the height of the section and the sidebar grows.
However, if I atribute a height to the content that I add to the section, it does not have any effect on the position of the footer, perhaps because it has nothing to do with the height of the section itself.
Is there a way to make the footer respond to the space the content being added will occupy, and just automatically move along, remaining at the bottom of the page ?
You have position:absolute set on your .section div, which will only ever use its CSS height value for the amount of space it takes up, regardless of its actual content. Removing that absolute position should solve your problems. There's (almost) always a way around absolute positioning. In your example, it seems completely unnecessary.
Here's a helpful site for CSS positioning:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Hope it helps!
Try this:
.footer {
position:relative;
left:0;
bottom:0;
width:908px;
height:300px;
}
Also when putting 0, there is no need to add the px.
I am checking the CSS code and have spotted position in every div. Try to balance it because it affects other divs
Also try
.footer{
clear: both
}
I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).
(See Example for a visual)
The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.
And the Following CSS results in a gap between the content and the footer.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?
Thank you!
FIDDLE: http://jsfiddle.net/3R6TZ/2/
Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/
CSS
html, body {
height: 100%;
margin:0;
}
body {
background:yellow;
}
#wrapper {
position: relative;
min-height: 100%;
vertical-align:bottom;
margin:0 auto;
height:100%;
}
#header {
width: 100%;
height: 150px;
background:blue;
position:absolute;
left:0;
top:0;
}
#content {
background:pink;
width:400px;
margin:0 auto -30px;
min-height:100%;
height:auto !important;
height:100%;
}
#content-spacer-top {
height:150px;
}
#content-spacer-bottom {
height:30px;
}
#divFooter {
width:100%;
height: 30px;
background:blue;
}
HTML
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-spacer-top"></div>
<div id="content-inner">
**Content Goes Here**
</div>
<div id="content-spacer-bottom"></div>
</div>
<div id="divFooter">Footer</div>
</div>
UPDATE
The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.
In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.
EDIT
Added a fix and tested down to IE7
UPDATE 2
Alternate method using :before and :after pseudo-elements instead of the spacer divs:
http://jsfiddle.net/gBr58/1/
Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean
UPDATE 3 (Sorry for so many updates)
Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...
I think you need position: fixed on the footer:
footer {
width: 100%;
height: 30px;
position:fixed;
bottom:0;
}