I'm trying to create a sticky footer for a responsive website. I've search the internet and have found various solutions but my problem is that due to the amount of text in my footer, the height of the footer changes are word-wrap occurs. I've tried using the method on Ryan Fait's site ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ) but since you can't account for the height of the footer being a static value, it's hard to set the push value for the CSS. Currently I just have the footer fixed to the bottom, but that's causing a problem because as the footer increases in height, it's taking up valuable space on smaller viewports. Here's an example of how much info is in my footer below. Any suggestions?
<footer>
<div id="upperFooter">
<p>2000 - 2012 College Name | Copyright | Internet Privacy Policy | Disclaimer | Collection and Use of Social Security Numbers</p>
</div>
<!-- end upperFooter -->
<div id="lowerFooter">
<p>College Name is a member of the Stated State College System. College Name is not affiliated with any other public or private university or College in State or elsewhere. </p>
<p>College Name is a division of College Name and is accredited by the Commission on Colleges of the Association of Colleges (“XIXI”) to award the baccalaureate and associate degree. Contact the Commission on Colleges at for questions about the accreditation of College Name.</p>
</div>
<!-- end lowerFooter -->
</footer>
Try giving the footer absolute positioning
footer {
position: absolute;
bottom: 0;
}
I've had good success with Ryan Fait's code in the past, but as you mention, it doesn't work well for variable height footers.
The best solution I've found when the footer isn't a fixed height is this Flexbox solution
Flexbox is awesome and forward thinking, so personally I don't mind if you won't have full support for some older browsers.
Working example based on code below. I've used some vendor prefixes so wider browser support but code not so clean
HTML
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>
CSS
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
You might want to check out this blog post: http://timothy-long.com/responsive-sticky-footer/
He uses the display: table hack to do it, but the demo page does work fine.
Your other option is using media queries to adapt the footer height as it changes.
You can try this: Modern Clean CSS “Sticky Footer”. Maybe it will help.
Use a footer with: position:absolute; and give it a height, then give margin-bottom: (footer height); to your wrapper.
What about
footer {
position: fixed;
bottom: 0;
}
Related
We're implementing a Muut forum in our site, and have successfully embedded it into a coding block in the body of the page. However, when logged in as an admin, the sidebar of the forum takes on additional features that pushes the forum into the footer of the page, instead of the body stretching to accommodate the forum dynamically. We've tried different coding techniques but have settled on a static page length (for now). We'd like to implement a way to dynamically stretch the page to fit the forum, no matter the size, vertically.
Here's the header we implemented:
<style>
#pageWrapper {
min-height: 1100px; }
</style>
And here's the muut embedded script:
<!-- Muut placeholder tag -->
<div class="muut">
<!-- Muut API -->
<a class="muut-url" href="https://muut.com/i/ourforumid">Our Forum</a>
<!-- Custom HTML -->
<h4>Another Forum</h4>
<h4>Another Forum</h4>
<script src="//cdn.muut.com/1/moot.min.js"></script>
</div>
Any help would be greatly appreciated, as our conventional attempts with div styling haven't worked. We don't want to overflow with a scrollbar, or hide the overflow, but just want the body container to stretch dynamically to accommodate the forum. Thanks!
Muut has its own div call tags, so after speaking with their team, here's the correct implementation:
.muut .m-sidebar {
position: relative;
}
It's that simple.
Im developing a site using Wordpress and id like to move the social network icons to the bottom of the page (icons are over at the top of the left hand panel)
http://www.chessfusco.com/flowers/
Ive dug around on this site and tried some of the things people have suggested in relation to sticking a footer at the bottom of the page etc but i just cant seem to get it to work!
Would anyone mine giving me a hand?
Yous
Chess
Just add this in your markup
<div class="dock-panel-wrap" style="position: fixed; bottom: 0;">
See
Add the following to this class:
.dock-panel-wrap {
padding: 0 20px;
position: absolute;/*Add position absolute*/
bottom: 0;/*Add bottom at 0*/
width: 100%;/*Set width to 100%*/
}
It's hard to know for sure without knowing what theme you use. A good start would be to check 'Appearance' > 'Widgets'. With any luck, the social icons will be a widget, that you can simply move to the footer 'sidebar'
Edit:
I can see that you're using the 'epix' theme. Your first place to ask would be the support forum - http://help.themeva.com/?envato_item_id=5783556. After all you've paid for the theme, you're entitled to some support.
In ul.dock-panel class replace
position:relative;
with
position:absolute;
bottom:0px;
I have two divs floating left. I dont really want to use position absolute though, is there another way to keep the side by side without using position absolute? or is this the only way?
<div class="moreinfo" id="darkgray">
<p>
Today, hate speech continues to profilerate throughout the Internet, normalized in the form of YouTube comments, animated GIFs, and tweets. Online anonymity affords users a sense of security that fosters a culture of cruelty and bigotry. Our goal is to create a conversation about the consequences of hateful speech that rethinks how we communicate online. Social media is full of positive potential; we can tap into it by holding each other accountable.
</p>
</div>
<div class="moreinfo" id="lightgray">
<h2>
"WE NEED TO TEACH OUR CHILDREN NOT TO STAND SILENTLY BY WHILE OTHERS ARE BEING TORMENTED. IN THE END, THEY WILL BE SAFER ONLINE & OFFLINE."
READ ARTICLE BY WIRED SAFETY
</h2>
</div>
<div class="clear"></div>
css
.moreinfo{
width:715px;
height:250px;
float:left;
color:white;
}
You can use display: inline-block to have them side by side.
Here is an example: http://jsfiddle.net/2sZCb/
.moreinfo {
display: inline-block;
}
Here is a good article on the same issue you're having:
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
the best way i noticed was to use percent 50% for the width of both
the css you have written is work correctly for keeping div side by side, but you have to take precaution about the width of the inner floating divs, it should not be greater than the parent's width.
try this (reduce the width of the moreinfo just for demo.):
.moreinfo{
width:150px;
height:300px;
float:left;
color:black;}
the best solution is using display:table and display:table-cell for being sure that they are side by side
Set the containing element to a width large enough to contain both the way you want.
body {
min-width: 1450px;
}
Here's a fiddle
A lot of people's HTML markup looks like this:
<html>
<body>
<div id="wrapper">
<p>Stuff in here</p>
</div>
</body>
</html>
And most of the time in examples here, or on the web, people suggest that you should apply width settings to the #wrapper, instead of the <body>.
Is there an underlying reason for that?
For example, in an article on techniques for gracefully degrading media queries, and to give you some context on Technique 1: Do Nothing:
The elephant in the room is Internet Explorer for the desktop.
With a mobile-first solution, large screens will display the content
in one column, resulting in a painful reading experience for the user,
way past the established maximum for comfort: 50 to 75 characters.
It might be worth setting a max-width property in your main container and then upping that max-width in a media query.
And their CSS:
#wrapper {
_width: 460px; /* Take that, IE6! */
max-width: 460px;
}
#media only screen and (width) {
#wrapper {
max-width: 1200px;
}
}
Here's how it'd come together for IE (media query is commented out).
Would there be any difference whereby instead of applying that to #wrapper, we would apply it to <body> — with the standard website in mind?
Any potential bugs? I tried it here, and it seems to be OK. Just what if the layout gets more advanced...
Well, you want to use as few elements as possible I guess. However there are many instances where #page-wrapper and body are not interchangeable. In many situations you need to use the body as the background color instead of the html tag. In these cases (weighted footers for example) you need the body to stretch out the html and you need a wrapper to contain the content, maybe center the content, and force the body to stretch out and contain it.
So - I guess I would say, that most people use a wrapper because they saw it in their first class or online tutorial. I think that for the most part, it is a habit for many. I would leave the body as is and margin the wrapper to 0 auto and use a max width like you have. It's just EI 8 and before - can I use media queries ? - maybe you should detect EI 8 and make a unique style sheet. I find that after defining everything for mobil, my media queries are only a few lines of iteration after that -
I have been asked to design a side scrolling site for Wordpress similar to this
site. Each post is positioned side by side on the page.
Im trying to work out if there is a line of PHP that i can add to page.php that will allow a normal vertical scrolling site to horizontal scroll ?? as far as I'm aware there is no jQuery used . . . . .
I've looked for countless amounts of Wordpress themes but can't seem to find the relevant piece of php for horizontal-scrolling. It seems to be quite a common layout for UK based illustrators/graphic designers. Does anyone have any ideas how to achieve this ??
thanks
https://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
the DEMO...
https://css-tricks.com/examples/HorzScrolling/
Is quite good - although could be more intuitive with anchors & arrows
Use this theme:
http://thethemefoundry.com/shelf/
Otherwise you'll have to digg into CSS for that effect.
Give your body (or for instance a wrapper div) an explicit width, either via CSS (fixed, see below) or JavaScript (dynamic and for instance depending on the number of articles). Then float your articles left and give them an explicit width as well.
<!DOCTYPE html>
<style>
body { width: 8000px; }
.article { float: left; width: 800px; }
</style>
<body>
<div class="article">...</div>
...
<div class="article">...</div>
</body>