I have a page where the content is floated in the center so that in any browser size, the content div will always be smack bang in the middle.
Now, I've gone ahead and added a sticky footer to the page, however when the browser window is smaller than expected, the footer displays in front of the floated content.
I am not exactly up to speed with how clearing floats works or exactly how absolute positioning affects relative positioning. I am aware that once I make the footer absolute, it becomes independent of all the other divs, which is naturally not what I want, but this is where I am getting stuck.
My question is, how can I make the sticky footer display at the bottom of the page, but stay under (by under I mean below) the floated content if the height of the browser screen is smaller.
Here is an example of my current code: http://jsfiddle.net/ySru9/1/
I have taken the sticky footer code from here: http://www.cssstickyfooter.com/style.css and here http://ryanfait.com/sticky-footer/layout.css
I’m sorry if this is a repeat of another question on SO, but I have trawled through and couldn’t exactly find anything the same. I assume that there is some yucky jquery stuff that I need to delve into?
If you make the footer positioned absolute in your body, but make sure the body has some minimal height greater than your yellow container, this could work:
http://jsfiddle.net/willemvb/PZHvH/
try using:
#container
{
margin: 0 0 0 -100px;
position: relative;
}
Check this fiddle:
http://jsfiddle.net/ySru9/39/
Related
I have created a page that has a min-height of 100% with a footer, as outlined http://peterned.home.xs4all.nl/examples/csslayout1.html
It works for the page-filling div, but I would like to have elements inside it which also take up all the height available to them.
Attempts:
Adding height: 100% to them does not work. They will use the parent's height but there are other elements and padding etc so that's the wrong height.
Making them absolute and set top: 0px; bottom: 0px;. This will make the div fill up the entire height, but if content is added the div doesn't get higher.
If this explanation is unclear, I have an example here: http://markv.nl/stack/quine.php
So the parent dictates a minimum height, as does the content. The highest of them should be selected. I've found this a formidable challenge; is it possible without javascript?
Thanks in advance!
It is possible without javascript. But you should not use absolute positioning with this problem. Use this solution to have footer stick to the bottom of the page. And make content div min-height: 100%. With more content it expand and push the footer down and with little content footer will be at the bottom of the page and content div will be pushed up to the footer.
After a lot of fiddling, I am quite confident that what I want to do is impossible. Correct me if I'm wrong.
In my case, it turned out a fix was possible. I used the position: absolute to create the background pattern. Above that, I added the content in a width:100% div to make the page scale.
It'll only work for some applications, but I think a general solution is not possible.
I have a div that is centered on my website using margin: auto;
but for some reason if i start to shrink the width of my browser the div i showed in the image below begisn to move left with the browser, and wont stay in its position. I have tried using the position: thing but it doesnt seem to be working for my issue.
How can i get this div to stay centered and not move with the browser?
You can see the issue here on My Website
If you trysh rinking the browser width beyond a certain point that div just begins to move and isnt centered anymore.
Its a problem because people with small resolutions will not see the website right.
The div that seems to be having the issue is main-frontpage
change to min-width of your #footer to the same as the .jflow-content-slider & #main-frontpage (1050px) and then at least your content slider will not overlap the text at the bottom.
EDIT: looking again at your setup, just change the width of your #main-frontpage to the same as #footer #content-wrapper - 1240px. Really this is way too wide and it should be 960px wide but unless you change the width of your footer content this the only way to do it
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
i have a problem with a stuck down footer not been pushed down by 2x DIVs in the main content area.
www.superwideprint.com/swp2
for some reason the 2 content containers arnt pushing the footer down when the screen resolution is low, i have added a clear:both div above the footer but to no avail.
can anyone help me please.
style sheet and main page can be seen from the link above. been at this for hours now.
The footer's position is set to absolute, so the content div is not going to affect it. Setting the position to relative will not help either, as this means your bottom: 0 code will push it to the bottom of whatever it is in, not the page.
What you're after is a sticky footer, try this http://www.cssstickyfooter.com/ or http://ryanfait.com/sticky-footer/
The reason is the #footer DIV is position:absolute. So, remove position:absolute form your footer.
A part from that your want your footer always stay at bottom then you can use Sticky Footer technique. Check this http://ryanfait.com/sticky-footer/
I have a page that has a header, a footer middle section that should grows to fill the rest of the page.
i.e. it looks like this
Let me describe the layout I'm wanting
header = 100% of page width with a fixed height. I don't want it floating.
content = min width of 760pixels, max of 1000pixels
Height to fill up to the end of the page. But, not overlap the footer. Footer should be pushed down. If content is less than 100%, footer should be at the bottom, not moved up.
footer = 100% page width and always at the bottom of the content.
Now the problem I'm having is making the footer go to the bottom. I can get it to go beneath the content div, but not to the bottom of the page.
How would I achieve that in CSS? It seems awfully hard to do simple things like that.
See this for code on a bunch of different layout formats.
Check my implementation here.
You want position absolute with bottom: 0
You also want to make sure that the z-index is high so that content will flow under it (well, that's really your choice).
If I understand well your question, that will keep the footer at the bottom of the page, no matter the content.
Links that might be helpful :
css-fixed-footer
fixed-footer
an-old-implementation-of-fixed-footer
My thinking would be:
get a min-height attribute set for the content div (might need workaround with IE, as always)
or, get absolute positioning for the footer to bottom and set a negative margin to top, say, if the footer height is fixed to 50px, then set margin-top to -50px
Sorry I am working at the moment so I cannot craft a demo page :)
One critical thing for this design is to verify that the solution works for all contemporary browsers.