I have a <header> that is position: fixed; to the top of the display.
The natural consequence of this is that <main> ends up going underneath the fairly sizeable <header>.
I've faced this problem before and have solved it with a simple margin-top assignment on <main>. Here the issue is a little different though.
The height of the <header> is variable and unknown. It has top and bottom padding of 5px and a bottom margin of 5px. It has no explicitly set height of its own; it is decided by the content within.
The largest element in the <header> is an image that is assigned its height as 20vh. There is also an <h1> and <h3>, again sized using <vh> units. I know of no way that allows me to offset <main> so it is always below this dynamically-sized, responsive <header>.
I've been browsing SO but have found no single accepted solution to solve this. Many ideas rest solely on catching window resizes with JavaScript, getting the computed height of the header and assigning the top of main to match. I fear this approach will decrease performance and also introduce annoying page jumps/leaps etc. as JS catches up with the scrolling.
How this is kind of problem usually tackled in responsive design? Ideally, I'm looking for a pure CSS solution to this problem, or some kind of workaround for `position: fixed;'. Failing that, an elegant and versatile JS solution that doesn't hinder performance. This issue is causing me problems, because none of my usual attempts to resolve absolute/fixed positioning headaches are able to help.
Any advice would be much appreciated.
-Ilmiont
I would check this post. They mention pushing the content down with a second header or using javascript.
My guess is javascript would be a cleaner approach so you don't have extra content and unnecessary requests being made to the server.
Related
When trying to make websites responsive I quite often get horizontal scrollbar on small widths. But often it is quite not obvious which element introduces it and it might take quite some time to pin down. It is even worse when it is interaction of multiple elements... So maybe someone can give some advice, of how to reliably find which elements flow incorrectly?
You get a horizontal scroll bar when some element has width greater than its parent.
If problem is occurring in responsive design, elements which has width in px or em are probably the ones causing issue. Give them width in % and that might solve your issue.
I'm trying to use a sticky footer, but it seems to having a conflict with my css, I'm following this tutorial, but I want to know why the footer is in the middle of the page, what do I have to do to fix it.
My code:
jsfiddle.net/q2Vuq/
The reason why you're seeing this strange behaviour with the sticky footer is because of your usage of position:absolute; on a number of your elements. Namely, the ones wrapped within the #navigation div.
Take a look at this (this JSFiddle just illustrates the problem more clearly):
I've given the offending elements all a background colour (as well as the body), so you can see that these elements are actually causing the scroll bar to extend beyond the height of the body. Absolute positioning actually takes them outside of the layout - meaning they don't cause their parent #navigation to expand, which in turn does not cause its parent .page-wrap to expand, which ultimately results in the footer not getting moved down. The footer gets put to the bottom of the body (as a result of the sticky footer CSS), which isn't quite low enough since the absolute-positioned elements extend even further below (as they are ignored by the body).
So, with that in mind, how do you fix this behaviour? Unfortunately, your sticky footer relies largely on the assumption that all content will be figured into the layout above it, or at least that the wrapper element above it will be tall enough to account for all its contents. This makes your use of absolute positioning hard to keep.
The best solution is probably to remove your current usage of absolute-positioned elements in your document, and rework how you're going to place your elements. Since I don't know what design you're actually aiming for, I can't provide an example of this. An alternative is to place an internal wrapper element inside of .page-wrap, with a min-height set such that it goes below even the lowest absolute-positioned element. However, this second method isn't too flexible, and I wouldn't recommend it.
If this isn't what you were looking for, or need more assistance in this particular matter, let me know and I'll be happy to help further. Good luck!
I have simple page using a two-column page layout that breaks on zooming. Here it is - try zooming in with cmd+:
http://jamesabbottdd.com/ems-with-max-width.html
The header breaks on the right side, causing a horizontal scrollbar to appear. Originally I thought this was due to using pixels for sizing elements and setting max-width. This article is about that very problem:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Then I overrode pixels with ems but the problem persists.
This intrigues me to no end. I’ve been using CSS for about a decade now, the last 3 years on a high level, but haven’t yet figured out why the above page breaks but this one:
http://framelessgrid.com/
does not, regardless of how closely I zoom in.
Any help greatly appreciated.
Hmmm, it looks a bit like you've inadvertently linked together two slightly unrelated observations, making it a bit more difficult to diagnose the actual problem.
Separating the Symptoms
Based on your screenshot, it does appear that your header is coming up with some visual glitches. Additionally, a horizontal scrollbar appears - but rest assured that this is not due to any property of your header. In fact, it is due to your wrapper div below the header, which has a width of 1130px. So when you zoom in that much, it can't all show on the screen, and thus creates the scrollbar.
The True Issue
Returning to the problem with your header though, the reason why the colour is disappearing is because your header div has a width of 100%. If, when you took that screenshot, you were scrolled all the way to the left, you would have seen no problem with the header's background colour, because it would have covered 100% of the browser's width. (If you're wondering where this width of 100% came from, it's due to the h1 element inside the header; an h1 generally has a default width of 100%, a style you wouldn't be able to see even with an element inspector like Firebug open.)
Note that the site you provided does not display this issue due to a few things: first, its header doesn't have a background colour, so you wouldn't see any kind of issue in that respect (if it did have one though, you'd immediately see that the div doesn't actually span the whole screen as yours does; it is only a little wider than the text within, and has a fixed width. The title is centred not through only usage of the h1 element's width of 100% and text-align:center, but is also due to the margin:0 auto applied to the header div. But now, how to fix your issue?
A Solution
With the current structure of your page, the easiest solution would be to give your header div a defined width. Well, not a width per se, but rather a min-width, one which is identical to the width of your wrapper div. If you give it the style of min-width:1130px, you should see your problem solved.
I hope this was helpful! (Sorry if it was a little long to read, though.)
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 noticed a common technique is to place a generic container div in the root of the body tag:
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
Is there a valid reason for doing this? Why can't the CSS just reference the body tag?
The container div, and sometimes content div, are almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.
But a container div is just a div and you can style it with margins and borders. You can give it a fixed width, and you can center it with margin-left: auto; margin-right: auto.
Plus, content, like a copyright notice for example, can go on the outside of the container div, but it can't go on the outside of the body, allowing for content on the outside of a border.
This method allows you to have more flexibility of styling your entire content. Effectively creating two containers that you can style. The HTML body tag which serves as your background, and the div with an id of the container which contains your content.
This then allows you to position your content within the page, while styling a background or other effects without issue. Think of it as a "Frame" for the content.
I faced this issue myself redesigning a website. Troy Dalmasso got me thinking. He makes a good point. So, I started to see if I could get it working without a container div.
I could when I set the width of the body. In my case to 960 pixels.
This is the CSS I use:
html {
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
This nicely centers the inline-blocks which also have a fixed width.
The most common reasons for me are so that:
The layout can have a fixed width (yes, I know, I do a lot of work for designers who love fixed widths), and
So the layout can be centered by applying text-align: center to the body and then margin: auto to the left and right of the container div.
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.
This is one of the biggest bad habits perpetrated by front end coders.
All the previous answers are wrong. The body does take a width, margins, borders, etc. and should act as your initial container. The html element should act as your background "canvas" as it was intended. In dozens of sites I've done I've only had to use a container div once.
I'd be willing to be that these same coders using container divs are also littering their markup with divs inside of divs--everywhere else.
Don’t do it. Use divs sparingly and aim for lean markup.
I later found this, years after my answer, and see that there are some follow up replies. And, surely you jest?
The installed placeholder site you found for my domain, which I never claimed was my markup or styling, or even mentioned in my post, was very clearly a basic CMS install with not one word of content (it said as much on the homepage). That was not my markup and styling. That was the Silverstripe default template. And I take no credit for it. It is, though, perhaps one of only two examples I can think of that would necessitate a container div.
Example 1: A generic template designed to accommodate unknowns. In this case you were seeing a default CMS template that had divs inside of divs inside of divs.
The horror.
Example 2: A three column layout to get the footer to clear properly (I think this was probably the scenario I had that needed a container div, hard to remember because that was years ago.)
I did build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.
http://www.bitbeyond.com
Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".
Markup should be added as needed, not because that’s just the way you've seen it done.
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. Using container-div in HTML will make the website look more professional and attractive and therefore more people will want to explore your page.
Well, the container div is very good to have, because if you want the site centered, you just can't do it just with body or html...
But you can, with divs. Why container? It’s usually used, just because the code itself has to be clean and readable. So that is the container... It contains all of the website, in case you want to mess around with it :)
Forget the container. It's just a habit from the old, very old days.
Everything you can do using a div—you can also do it on a body tag.
I've never heard of issues using a div class="container" markup. But I have heard of issues using body as a top level container. See this article. Stick with the tried and true; who knows what browsers will do in the future.
Most of the browsers are taking the web page size by default.
So, sometimes the page will not display same in different browser. So, by using <div></div>, the user can change for a specific HTML element. For example, the user can add margin, size, width, height, etc. of a specific HTML tag.