Sample page
On the sample page I have set div#content {
padding-bottom:20px;
} which works well if 20px is enough to leave the footer beneath the content div. However, if the footer changes size, I'll need to change the amount of padding-bottom aswell. I want a more flexible solution.
Is it possible to fix this without moving the footer outside of the content-div?
Update:
found this page that describes a solution to the problem, but the author also states that:
There is only one limitation
You must set the height of the footer div to something other than auto. Choose any height you like, but make sure the value is specified in pixels or ems within your CSS. This is not a big limitation, but it is essential for this method to work correctly.
If you have a lot of text in your footer then it's also a good idea to give the text a bit more room at the bottom by making your footer a bit deeper. This is to cater for people who have their browser set to a larger text size by default. Another way to solve the same problem is to set the height of the footer in em units; this will ensure that the footer grows in size along with the text. If you only have images in your footer than there's nothing to worry about – just set your footer height to a pixel value and away you go.
Which leads me to believe that maybe what I want to achieve is not possible without JavaScript.
Because the height of the footer is unknown beforehand, you can't set an explicit height (in px or em) in the CSS. You can, however, get the footer height with javascript and set your content padding-bottom to it. One line in jQuery:
$('#content').css('padding-bottom', $('#footer').outerHeight(true) + 'px');
The jsfiddle: http://jsfiddle.net/blineberry/cFSX4/19/
You'll probably want to set the padding-bottom in your CSS to your best guess of the footer height and let the javascript make the minor adjustments as necessary.
Tell me if i got you right check this link out, if not just try to explain in other words whats the problem.
http://jsfiddle.net/2cJsf/19/
*You can use "position: absolute;" but thats your choice, I dont like using its buggy sometimes when the website has lots of divs with positions.
Personally, I put my footers on their own outside of the content div, this gives me a more consistent and flexible approach.
My code may look like this
<div id="content">My content here</div>
<div id="foot">Copyright © 2011 mywebsite.com. All rights reserved.<br />my random resize content here</div>
Then with CSS I may do something like this
body {margin-bottom:10px;}
#content {padding:5px;}
#foot {padding:10px;}
Just as an example but obviously style to suit your page and code.
I hope this helps.
Related
I have a fixed header at the top of the screen, and if I try to put an element after the header, said element ends up ignoring the height of the header.
HTML
<header></header>
<p>Empty text</p>
CSS
header {
display: block;
height: 100px;
width: 100%;
background: #eee;
position: fixed;
top: 0;
z-index: 100;
}
JSFIDDLE
I've searched on StackOverflow and other places for solutions to problems similar to this but with no avail (in part due to me having a hard time verbalizing the specific problem). I tried a clearfix,
<header></header>
<div style="clear:both"></div>
<p>Empty text</p>
But that still doesn't work. I also tried adding a margin-top: 100px to the p element, but I consider that bad practice in the case of me changing the height of the header in the future, and also having to do this for every single element following the header or any other element I might add a position: fixed or position: absolute. Additionally, the header will be a fluid height according to different sized screens.
Right now I'm wireframing so I'd really rather not use JavaScript, just plain CSS, if that's possible. If it's not, minimal vanilla javascript will do. This is a fundamental web design problem and I've always countered it with margin-top but I'm wondering if anyone knows of a cleaner, better way to counter it.
Also, this needs to be at least somewhat cross-browser. Again, only wireframing. My wireframes should be able to work on anything that supports basic CSS.
Sorry if this is a duplicate question, I'm sure it is, but I couldn't find anything that quite matches my situation. Any help is much appreciated!
http://jsfiddle.net/09qL0nzv/3/
var p = document.getElementsByTagName("p")[0],
header = document.getElementsByTagName("header")[0],
h = window.getComputedStyle(header).getPropertyValue("height");
p.style.marginTop=h;
This will set a margin-top to the paragraph equal to the height of fixed header. However, this does not take padding or border into account. There are two possible solutions for this.
Use box-sizing: border-box on the header. This will make sure that the height, including padding and a border, will be the height as defined in the stylesheet. (I highly recommend using border-box on all your elements, like so: *, *:before, *:after {-moz-box-sizing:border-box;box-sizing: border-box;}.)
Another solution is adding the padding and border to the computed value in JavaScript, and include that value in the margin top that you set to p. I don't like this solution, but it works.
When you fix the header, any other element you place disregards its very existence.
Only workaround I've seen is to give a padding (or margin). But, from what I understood you need a more dynamic soln. In which case your best solution would be to use client-side scripting say jquery/js to determine elements present height and then add the same as padding for elements below.
It's the position:fixed that causes the problem here. The header is no longer part of the flow content, so the flow content begins at the top of the page.
There is no ideal solution for this, but an option that might be a little better than changing the <p> margin is to add an empty <div> to the beginning of your content that matches the height of the <header>.
Here's an example JSFiddle:
For a more dynamic solution, this is what I came up with
$('p').css('margin-top', $('header').outerHeight());
$(window).resize(function() {
$('p').css('margin-top', $('header').outerHeight());
});
There might be a better way of doing this, but my reasoning was setting the initial margin of the p tag to be the outer height of the entire header, and then whenever the header might change (in this case, that would be when the window is resized), the margin is then re-evaluated on the p tag.
I'm working on a website in which sometimes the pages might not cover the entire height of the screen (due to less content), which creates empty white space below the footer. I'm trying to solve this by always keeping the footer below the viewport. I've tried many ways to do this, but all of them solve one problem and create another.
Here is a jSFiddle for what I have so far.
The only time it actually worked was when I set height:100% to the body and html, but this makes the content overflow the body in the DOM, which I'm trying to avoid. Also, because the site needs a boxed layout, I need to wrap the page-content and footer with the #page-wrapper div as used in the code.
Please let me know if there is a way to achieve this, with the given markup.
Thanks!
Edit: Here is a slightly updated jSFiddle
I think you can do this by absolutely positioning the footer and making the page-wrapper relatively positioned. The catch is that you'll have to size the page-wrapper using JS based on the height of the HTML element. Something like:
$('#page-wrapper').height($('html').height());
but you may need to tweak the position quite a bit unless you use
* { box-sizing: border-box; }
I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.
However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.
Here's the link to see it:
removed
As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.
PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.
Thanks in advance
Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
From main-style.css line 5:
overflow:hidden
and main-style.css line 127:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content
(also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
<div class="centerText messageWrapper">
<div class="messgaeHeader">
<div style="float:left; width:50%">
From: 12345678<br />
</div>
<div style="float:right; width:50%; text-align:right">
Date: 123456789<br />
</div>
</div>
1234567890
</div>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
I have been trying for 2 hours to get my footer to stay at the bottom.
I have been trying "Matthew James Taylors" technique, but no luck.
Anyone see what I am missing or doing wrong?
Here is a Live Example : http://glustik.com/essex/index.html
Any help would be GREAT!
I would attached the CSS Code with the { } but it always breaks for me.
I feel like the CSS to fix this will still be problematic, I would be tempted to rewrite the whole thing: HTML markup and CSS, otherwise I suspect there will be more trouble down the road.
Here are some things that are most likely giving you trouble:
Duplicate id values (as mentioned)
Unnecessary absolute positioning
Hard-coded height values on several divs
Unnecessary use of "clearfix" divs
Overuse of negative margins to compensate for padding on other elements (always problematic)
Minor but relevant: use of classes like floatRight, just as bad as using inline styles.
I think in general, instead of trying to control the positioning and height of everything - just let the normal content flow dictate it. Naturally, the last element in your markup (footer) should be on the bottom without all these over-thought restrictions.
Best of luck!
EDIT: Apparently I've come off as unhelpful, so I felt I should add a direct response: For a quick fix, to simply get the footer on the bottom:
Remove the height and bottom padding from #mainBody
(tested in FF4 and IE8). There will still be some padding issues within the footer, but that can be resolved in a number of ways depending on how you'd like to approach it. Once again, good luck with your project.
You have the footer positioned absolutely in #container, which is positioned relatively. therefore, its being positioned at the bottom of #container.
try moving it out of #container, or remove the relative positioning from #container
Because all of the content inside your main container (#mainBody) is floated, the container's only way to determine it's height is via the "height" property, which is set to 100px;. The footer is correctly rendering right below the 100 pixel height of the main container.
You have three options:
you can either properly clear your main container so that its height is dynamic based on its content using a clearfix like this
or you can set the height of the main container to something larger. I changed it to 700px and the footer rendered well below the main body.
or you can remove the height altogether, which will probably be the best solution in the long-run. Thanks to #Gaby aka G. Petrioli for pointing this out.
I've been doing this a long time and have never heard of this method. That doesn't make it bad, but the currently accepted version in my circles comes from Ryan Fait (http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
If you load this up in Chrome and disable the position:relative from the container it does properly glue the footer to the bottom of the page. That signals a problem to me, because it's contrary to what the tutorial says. Regardless, it accomplishes your goal.
You should take at least a look at Compass. It makes CSS so much easier. For your particular question, take a look at:
http://compass-style.org/reference/compass/layout/sticky_footer/
Make the following changes and it rendered fine in Chrome for me:
remove bottom:0; from #footer
change padding-bottom:167px; in #mainBody to the desired location (I used 455px and it looked pretty good)
I have a structure that I want to repeat with different content each time. Here's the code (for a Web version of a script):
<div id="1_0" class="lineblock"><div class="whosays"><span>CHARACTER:</span></div><div class="whatsaid"><span>Line...</span></div></div>
The content of the <span> in the whatsaid div changes. Sometimes it fill fit on one line; sometimes not.Using static heights, it looks like this.
So, I want to change the height of the lineblock div and the whosays div based on how tall the whatsaid div needs to be.
Is there a way to do this? Any kind of scripting isn't really an option in this case.
I've tried various combinations of height:auto and height:100%, but nothing's worked.
Thanks in advance!
Graham's links are probably more interesting than what I used here. However, that's works. You can see a demo here : http://jsfiddle.net/uwf8U/1/
The lineblock div will expand to the height of whatever content is inside it. That leaves setting the height of the whatsaid div as the main challenge.
Essentially what you have here is the classic "CSS Equal height column" problem, which as been discussed in several places. Check out the following links:
http://www.alistapart.com/articles/holygrail/
http://www.alistapart.com/articles/fauxcolumns/
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks