Here is my jsFiddle for the following question: http://jsfiddle.net/arelia/Rruxf/
I'd like to have a header that stays at the very top of the body and a footer that stays at the very bottom of the body. I have a content div (position: relative) between the header and footer, and when I set a margin around the div my absolutely positioned header and footer move from their top/bottom positions by the height of that margin (this also happened when I tried setting a margin above and below the paragraphs in the div). In the fiddle you can see that the footer is not attached to the bottom even though it's absolutely positioned (I went ahead and made the header static since static gives the intended result). How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements? If the position: absolute elements are moved out of the flow why would anything affect their position at all?
I've tried searching here and Google for "CSS margin affects absolute" and a few other phrases to no avail. I discovered this while playing around with it some more in developer tools:
Metrics show the body is the height of the html element minus the amount of one margin (the margin that's still affecting the footer). So, the body must be stretching to the height of the content div since there is nothing else within the document flow within the body to define its height. But that height ends where the content ends instead of after the margin. Shouldn't it include the margin?
If I make the height of the body 100%, the footer positions
itself to the bottom of the viewport and then stays fixed in that
spot when I scroll. Why isn't it attaching itself to the bottom of
the body instead of the bottom of the viewport?
Answer to Your Two Last Questions
"But that height [of the body] ends where the content ends instead of after the margin. Shouldn't it include the margin?" Answer: No, the body height itself is unaffected by the bottom margin of an element within it.
"If I make the height of the body 100% ... Why isn't it attaching itself to the bottom of the body instead of the bottom of the viewport?" Answer: It is attaching to the bottom of the body because by setting height to 100% you have set the body to the viewport height.
Answer to Your Main Questions in Reverse Order
"If the position: absolute elements are moved out of the flow why would anything affect their position at all?" Answer: What affects their position is the position of that body element. In taking the answer to the first question above, that margin on an inner element can cause the element within the the body to keep off the bottom of the viewport, and thus cause the body itself to gap from the bottom of the viewport by that distance. Then, when you position an element to the body, it will be gapped because the body is not flush to the bottom of the viewport. This is what you are seeing in the footer area of your fiddle.
"How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements?" Answer: Adam's original answer of fixed is one method, based strictly off your bolded question (he has since modified it). However, you clarified in a comment that you really want is "If the content is short I want the footer at the bottom of the viewport. If the content is long I want it to follow the content and touch the bottom left and right corners of the page." Adam's original answer of fixed positioning will not accomplish that (as he also realized). Rather:
Do This
html {height: 100%}
body {min-height: 100%;}
div {
margin: 20px 20px 0 20px; /* eliminate your bottom margin */
padding-bottom: 50px; /* use bottom padding to get space for footer */
}
See short content fiddle.
See long content fiddle.
Looking at your commment I think I understand what you're trying to achieve. You can use this:
http://ryanfait.com/sticky-footer/
Here is how you could integrate it with your existing code:
http://jsfiddle.net/wJSZD/
Related
i've created a CSS Desk example to help with my question.
I have an outer div, .mainPage and it has a child div, .content. When I set .content's top margin to any size, .mainPage moves with the content.
I don't want that to happen, I want .mainPage div to stay at the top above the header, and the content to start 160px down, which is below the header.
The header is fixed so that only the content moves, to give the really nice effect of the background.
If you change margin-top on the content element to padding-top, the background on .main Page will go below the header. Is that the effect you are going for?
Also, just to note, you don't have a position of relative, absolute or fixed set on .mainPage, so z-index won't work.
I'm having an issue where I have a min-height set up in a div above the footer. In order to get the text in the footer to align center, I am using clear:both in the CSS. The only issue is that now there is a large space between the content and the footer?
Here's the site I'm working on:
http://brimbar.com/no_crawl/RiverHollow/about.html
Thanks!
It's because you have that floated image with the giant margin-bottom. clear: both means "no elements should be on either side of this element", so the footer has to be below that 600px margin.
The reason that the footer text isn't centered without clear: both is because it's only centering within the width between the start of the div and the left side of that image (plus its giant margin).
What you should do is change the markup so that your image appears in another column div inside the content div, since you seem to want to display it in its own column rather than floated. If you do this, you won't need the giant margin, nor will you need clear: both on your footer elements.
Here's a demo: http://jsbin.com/uxiqer/1/edit
Note you can use floats or position: absolute to position the .images div on right; I just find position: absolute easier to work with.
If you don't need images to display in their own column then you can simply keep the float on the image and remove that margin-bottom, then the text will wrap nicely around the image and its margin. This is the intended purpose of float. Then without the giant margin overflowing the content div, the footer text can be centered properly without any need for clear: both.
Remove the clear: both and add a specific height to the footer not just min-height. I can't get your text to align but I bet it would if you removed "position:static" on it.
Since you hard-coded the 1550px height on the container itself, the footer is taking up the rest of the space available to it since it only has a "minimum-height" requirement not max.
I'm developing a mobile website that integrates horizontal swiping. Unfortunately this has created a headache when trying to get the rest of my website layout to work.
http://jsfiddle.net/N7eWS/4/ - try resizing your browser window fairly small and you'll see the #footer (red) halfway down the content inside #wrapper (green). This appears to be todo with setting height:100% on most of the elements and then the absolute positioning applied to the horizontal swiping div (swipeview-masterpage-1).
I want it so that #wrapper expands to the height of the content, the #footer sits underneath #wrapper and is always off the bottom of the screen (you should have to scroll to see it).
Is there anyway I can make this work without touching (or perhaps making minor changes to) the swipeview divs? Any ideas would be appreciated!
One of the problems is the position: absolute on #swipeview-masterpage-1 and then another absolute on the parent. Parent absolute elements will not expand to the height of any absolutely positioned children (example).
You also have a random <span> in the mix, which is an inline element and will have a height of 0 anyway. Remove that to make things clearer.
Now to why your footer is appearing in a strange way. Your #wrapper will always be 100% of the parent height, your footer will always exist at 100px (header) + 100%. Disable the min-height property and you will see the wrapper collapse, and the footer sit at 100px. That's why the #wrapper content overlaps the footer.
So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.
When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).
Here is the css:
#footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
}
/*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
min-width:1000px;
}
/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
#footerContent ul{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerContent li {float:left; width:250px; }
Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.
I've tried width:100%, min-width, width:1000px; but none of those seemed to work.
http://postimage.org/image/3so264fnb/
Regarding your comment about Stackoverflow being similar
(at least as of 4-29-2012)
The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.
To get the div to relate to the content width, you must either:
Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
Set the container div to float, as a floated element wraps its content.
Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.
As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.
I hope this helps.
Original Answer
It is a little unclear what can be done because there is some information lacking. Here are some things to look for:
Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.
That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.
I'm trying to have the following markup:
body
#container
#content
where body is full width and has a background snapping to the bottom right.
where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.
where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"
When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.
I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.
I've made a sort of solution over here:
jsFiddle
Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.
Is this what you want?