I am trying to implement the CSS Sticky Footer method as shown at cssstickyfooter.com. (I have also tried Ryan Fait's solution but to no avail).
I have followed everything to a t, or least I think I have. I have a container div (they call it wrap), a logo bar (they call it a header) and a page div (they call it main) then I have my footer.
So here is the problem, if I have the overflow:auto on then I get a really short div and a scroll bar (yucky). But if I comment it out all my content shows but the page still believes that the div is the same size as if the overflow:auto was not commented out.
It otherwise works just as it should. The footer stays at the bottom and when resizing, it stops at the short page/main div. Is there any way to get it to the bottom of my content? I should mention that I can't use fixed height for my page/main div because I need it to resize based on the size of the div's it contains (whichever one is visible at the time).
It may or may not be the footer causing the issue, either way I could use some help figuring this out.
HTML:
<body>
<div id="container">
<div id="logo">
<div id="home-flower"></div><!-- end home-flower -->
<div id="about-flower"></div><!-- end about-flower -->
<div id="proof-flower"></div><!-- end proof-flower -->
<div id="contact-flower" ></div><!-- end other-flower -->
</div><!-- end logo-->
<div id="page">
<div id="spacer"><br/></div><!-- end spacer -->
<div id="home">home</div><!-- end home -->
<div id="about">about</div><!-- end about -->
<div id="proof">proof of concept</div><!-- end proof -->
<div id="contact">contact</div><!-- end contact -->
</div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>
CSS:
* {
margin:0px auto !important;
}
html, body {
height:100%;
}
#container {
width:800px;
background-color:#F0F;
min-height: 100%;
height: auto !important;
height: 100%;
}
#page{
width:100%;
min-height:100%;
position:relative;
background-color:#F00;
padding-bottom:75px;
/*overflow:auto;*/
}
#logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:hidden;
}
#footer {
position:relative;
margin-top:-75px;
width:800px;
height:75px;
background-color:#C0F;
clear:both;
}
#spacer {
position:relative;
line-height:20px;
}
How about using
<div id="footer">
This is footer text
</div><!-- end footer -->
and css as
#footer{ position:fixed; bottom:0px; }
The footer sticks to the bottom of the page.
Is this what you are looking for.
It looks like I needed to change the position of the #home, #about, #proof, and #contact divs to relative instead of absolute like I had them. However, once I do that they are no longer stacked on top of each other. Any ideas on how to make relatively positioned divs have the same (x,y) position so that they are right on top of each other? I have the top and left set to 0px for each div but theyare just layering themselves instead of stacking...if that makes any sense.
Related
I have a (relatively) simple layout, with fixed header and footer divs. The content div is split in two "full height" divs with display: inline-block;. The left div is used for navigation and the right one for the actual content and has overflow-y: scroll;. The problem is that I cannot set the width of the right div to fill the remaining space. I have tried using float (as a last resort) but the right div was pushed downwards and, honestly, I'd prefer not to use floats.
Is filling the remaining width possible in my scenario? I would very much like to not hardcode the width of the right div.
Here's the JSFiddle example.
Simple HTML structure:
<html>
<head></head>
<body
<div id="container">
<div id="header">This is the header area.</div>
<div id="content">
<div id="leftContent"> </div>
<div id="textContent">
<p>Hello world (and other content)</p>
</div>
</div>
<div id="footer">This is the footer area.</div>
</div>
</body>
</html>
CSS excerpt:
html, body { margin:0; padding:0; height:100%; }
#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
height:auto !important; height:100%; min-height:100%; }
#header { border-bottom:1px solid black; height:30px; }
#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }
#leftContent { display:inline-block; height:100%; width:200px;
border-right:1px solid black; vertical-align:top; }
#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
width:540px; /*would like to not have it hardcoded*/ }
#footer { position:absolute; width:100%; bottom:0; height:30px; }
Edit:
Thanks to Prasanth's answer, I was able to achieve what I wanted. The solution was to set
display:flex; flex-direction:row; on the #content div and
width: 100%; on the #textContent div.
Testing on IE 11 (and downwards in compatibility mode) did not produce unwanted results.* The new version can be found here.
*Edit: This method works properly in IE11. In IE10, the scrollbars do not appear if the content of the #content div requires scrolling. The layout works thought. In IE <10 it does not work at all.
You can use Flexbox to achieve this
Go through this and you will get what you need
.content{ display:flex } .content > div { flex: 1 auto; }
and beware of browser support
I have this side menu that I wanted to be fixed so it will follow the user when the user scrolls. I'm planning to put jumping targets inside it because the contents are very long.
The problem is, I made it fixed and then when I scroll it down, it went pass the footer. I used
top:0;
and it doesn't went up the footer, but it went up the header. What would be the solution?
This is my html.
<div class="myheader">
</div>
<div class="content">
<div class="left_side">
</div>
<div class="right_side">
</div>
<div class="footer">
</div>
This is my css:
.myheader{
float:left;
width:100%;
height:190px;
background: #fff url(img/blackorchid.png) repeat scroll 0 0;
}
.content{
float:left;
background: #fff url(img/linen.png) repeat scroll 0 0;
height:auto;
margin-left:120px;
width:1100px;
}
.left_side{
width:800px;
float:left;
}
.right_side{
width:300px;
height:500px;
background-color:yellow;
float:right;
position:fixed;
top:0;
}
There are contents inside the left_side. That's where the texts are. The division that I want to be fixed is <div class="right_side">.
Not sure I am fully following, but if you want it to be fixed to the foot of the page, then why not set bottom to 0. See here: jsdfiddle. I also set the right to 0 to make it fix to the right of the page.
.right_side{
width:300px;
height:500px;
background-color:yellow;
position:fixed;
bottom:0;
right:0;
}
I added the fill div just to make sure that the page scrolled.
If you want some space from the bottom, then just specify a margin. See this updated fiddle: jsfiddle
I have a CSS problem that I can't seem to overcome. I'm attempting to push the img from the container DIV upwards to overlap the img in the top DIV.
I've tried quite a few methods that don't work. Z-Index doesn't have any effect on the layering of the images, my understanding of Z-Index is far worse than I thought it was and some guidance would be really helpful.
Here is the HTML:
<!-- DIV CONTAINS THE HEADER IMAGE AND SOCIAL MEDIA PLUGINS
Padding: 0; Margin: 0; Border:0; -->
<div id="head-image" class="image">
<!-- SOCIAL LINKS HERE -->
<img src="images/mainImg.png" alt="" />
</div>
<!-- DIV CONTAINS ALL THE CONTENT ON THE PAGE
padding:10px; Margin:0; Border:0; -->
<div id="container">
<div id="mapPlace">
<img src="images/activityIcons/map.jpg" alt="" />
</div>
<!-- TEXT DIV HERE -->
</div>
And my CSS rules
img {
position:relative;
}
#head-image {
position:relative;
width:520px;
height:482px;
z-index:5;
}
#head-image img {
z-index:5;
}
#mapPlace {
position:absolute;
top:-80px;
}
#mapPlace img {
z-index:10;
}
#container {
position:relative;
float:left;
clear:both;
min-height:100%;
padding:2%;
width:96%;
background-color:#000;
overflow:hidden;
color:#fff;
z-index:10;
}
Your code seems to work fine except that you have overflow:hidden on the container, which keeps the bottom image from ever getting up to the top image.
See this jsfiddle where I replace the images with div squares, and just removed the overflow:hidden:
http://jsfiddle.net/g72xV/
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
Try making the footer position:fixed.
http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.
Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
EDIT
Using the technique in the article above (tested - and works in fiddle):
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x
Try using with absolute position for the footer div
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
Make sure that body height is 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer
It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.
I'm looking for CSS rules to set a simple page layout.
I want a header div that has a fixed height, and extends fully across the top of the viewport from left to right,
I want a main content div that completely fills the remainder of the viewport.
There should be no area within the viewport that is not within one of these two divs, and neither div should extend beyond the viewport.
And these should remain true as I resize the browser. Regardless of what I put in either div. (Assuming, of course, that I'm not using overflow:visible.)
Seems simple enough, but I've not been able to make it work.
What about something like this: http://jsfiddle.net/WqCYh/
For the sake of people not wanting to click the link, here's the HTML and CSS:
<style type="text/css">
#header
{
height:100px;
background-color:red;
position:absolute;
top:0px;
left:0px;
right:0px;
}
#body
{
background-color:blue;
position:absolute;
top:100px;
left:0px;
bottom:0px;
right:0px;
}
</style>
<div id="header">
Header
</div>
<div id="body">
Body
</div>
Are you sure you need your content div to be the height of the browser? You can apply a background color to the body to simulate full viewport coverage.
Anyway here is the 100% height code...
CSS
html,body { height: 100%; }
#header { height: 100px; background: red; }
#content { min-height: 100%; background: blue; }
#inner { padding: 20px; }
XHTML
<div id="content">
<div id="header">
<h1>Header</h1>
</div>
<div id="inner">
<p>Content</p>
</div>
</div>