I'm trying to position div as a footer inside parent div.
<div>
...some content...
<div id='footer'>
<span style='float:left'>Left text</span>
<span style='float:right'>Right text</span>
</div>
</div>
Now left and right elements are ok, but the footer div does not align to the bottom of the containing div, but to the bottom of its content.
But if i try putting position:absolute for the footer, it looses grasp on the parent's div width and thus left and right spans go one right after the other.
http://jsfiddle.net/ch4Hw/
Use position:relative; on the container and position:absolute; bottom:0; height:auto; on footer.
What you're looking for is (I think) a sticky footer. See here for a good technique: http://ryanfait.com/sticky-footer/
If you are still looking, I achieved what I think you are after here:
http://www.facebookanswers.co.uk/code/fullheight/demo2.htm
Its a self contained file, IE all the CSS is there with the markup, so you should be able to see what is going on.
The full article is here:
http://facebookanswers.co.uk/?p=312
What that gives you is a header, two columns and a footer.
One column is used for navigation, the other for the main content. The footer goes at the bottom of the main column. If the content is less than a full screen, the footer remains at the bottom of the screen. However, once you get more content than screen, it will scroll with the rest of the data.
Related
I have a problem I can't seem to fix.
I have a big background banner which is set to position: absolute problem is, I want my footer to constantly be underneath it - no matter what height the banner has.
An example:
Footer looks fine: http://danne-bro.com.web122.curanetserver.dk/histor.aspx
Footer NOT-fine: http://danne-bro.com.web122.curanetserver.dk/who.aspx
I have tried many many things as you can see in the sourcecode. A scraped version of what I'm trying to accomplish would be something like this:
<div id="fit">
<div class="wrapper">
<div id="banner">BANNER IN HERE - Position Absolute so its always underneath</div>
</div>
<div class="wrapper">
All content goes here - which is on top of the banner
</div>
</div>
<div id="footer">
Footer in here - should float right under the banner.
</div>
But exactly how I make the footer stay under the banner (no matter it's height) is a problem for me. I hope I explained myself well enough.
You cannot float an absolute positioned element, because when you use position: absolute; your element gets out of the document flow, you need to use top, left, right, bottom to position it, floats wont work on absolute, more or less you can do is use an absolute positioned div inside a position: relative; container, or instead try using ryan fait's sticky footer
I have fixed footer DIV and content DIV. Footer DIV is fixed so it is visible all time. Content DIV is 100% height, but it touches footer DIV and crosses it to the end. I want it just to end when footer begins.
<div id="footer">
</div>
<div id="content">
</div>
Here is a jsFiddle link: http://jsfiddle.net/MXMWe/3/
Problem: Content DIV (with its text) goes over footer.
Note 1: Footer has to be visible all time no matter where you scroll (possibly fixed.
Note 2: Scrollbars have to be normal as it is when you first load browser. No changes there.
Here is an image telling what I want to achieve:
I will give more info if asked.
Thanks a lot.
I updated the jsfiddle:
http://jsfiddle.net/MXMWe/4/
A few things:
I added a <div id="footer-padding></div> before the closing div in #content. Then in the css added height:120px; (the same height as the #footer ) - This allows the content text to not be stuck at the bottom of the site, but instead the very top of the footer.
I removed the opacity that was on the footer because if you have the opacity it effects the entire div - AKA the text from the content div would be visible behind it since it's transparent.
I added a z-index: 2 to the #footer to ensure it is above the #content at all times.
If you're going to have an opacity/transparency as the background of the footer you will see anything it's above, behind it.
Have you tried using the CSS Sticky Footer?
I have a number of divs with the same class, that I want to align vertically inside their container div.
The html part looks like this example:
<div id="container">
<div class="element">
........
</div>
<div class="element">
........
</div>
<div class="element">
........
</div>
</div>
I have floated the elements (divs with .element class) 'left' so they are all on one row. So far so good no problem yet.
The contents of the .element div vary. Now by default, they are aligned top, and I want to align them to the bottom using this css:
#container {position:relative;}
#container .element {position:absolute;bottom:0;}
Works and does align them to the bottom, but unfortunately it also sticks them together and they all look like they are in one place as one div, the one on top of the other.
Trying to set width, margin, padding etc.. to the .element div does nothing, they just act as one div.
What do I need to do to separate them ? I believe giving each div a separate class is not the right solution.
I also would not like to use table solutions, unless there is absolutely no other way.
I have tried vertical-align:bottom which for some reason does nothing.
I kept searching for long about this but nothing related comes up on the net, so if it's a duplicate I apologize.
Thanks in advance.
Well this is what the position:absolute is all about. I don't see why you use it.
If I understand right you want to vertical align the divs to the bottom and have them appear next to each other / beside each other ? Then most likely you have to modify the display css attribute of your divs to display:inline-block; or even use span tags instead.
You could wrap the #container div with another div, set its position to relative, and set the position of #container to absolute and it's bottom to bottom: 0
See my example
I have this template I have been working with and I am really stuck on figuring out why the layout div is closed right away.
I looked at it with http://validator.w3.org and while there are many errors on the page, the main one is that there is some unbalance of closing and opening of divs. I am staring at it with firebug and nothing comes to mind as to why this is happening.
Any idea why the layout is so messed up here? http://www.problemio.com/problems/problem.php?problem_id=223 and why the footer is appearing on the right side of the page?
Thanks!
add </div> before <div class="footer"> , and add clear:both; to .footer{}
the footer is appearing on the right side of the page because it is in your right column div:
<div style="float: right; width: 240px;">
Your footer is inside the <div float=right> the contains the sidebar text. It cannot appear at the bottom of the page, only at the bottom of that div. If you want it to spread out at the very bottom of the, you'll have promote that footer div to be a direct child of the #layout div.
how would you make a footer container follow directly after the content and then stretch to the bottom of the page?
The setup is:
header-container is fixed 150px height
content-container stretches with whatever content should be inside
footer-container follows stretches for the remainder of the page.
So far I either have the footer directly after content with white space following, or a footer stuck to the bottom with white space between the content and the footer
The actual styling can vary depending on whether you are sure your page will never by long enough to scroll. You can often use the body tag itself for this trick, but it is less flexible and not recommended.
The idea here is to create a very long footer div, and have it be contained by the element which contains the rest of your content. Since the overflow of the parent is hidden, the actual length of the div will be ignored.
This is often shown with a counter-balancing bottom padding, but in your case that shouldn't be needed.
<style>
html,body,.bigDiv{height:100%}
.header{height:150px}
.footer{height:2000px; background-color:green;}
</style>
<div class="bigDiv" style="overflow:hidden;">
<div class="header"></div>
<div class="content">
Content
</div>
<div class="footer">
Footer
</div>
</div>