I've coding for about a week now and I'm learning all by my self (which hopefully explain a lot of my errors in this code).
I've tried dozen of examples to get my footer to stick to the bottom of the page.
When i try to change the "position:absolute" of the wrapper or footer, it either gives a gap between the browser window and header or puts the footer up on the top.
I have no idea how to fix this.
(Some tips for my code is also greatly appreciated!)
HTML
http://pastebin.com/ksgJSUpz
CSS
http://pastebin.com/i9nPtYkU
Thanks!
The problem is that you've been using position:absolute throughout your code. Absolute positioning breaks the flow of the document.
If you use relative positioning or if you don't define positioning at all (static position) the elements will run the one after the other. With your code you have to calculate the height of each element end start the next one where the previous ends by hand. This happens because absolute positioned elements don't push other element down. They are as if they have no height. For example you have your header height at 100px; and then you start your info with absolute positioning and top 100px;
Your footer will go and sit at the absolute position that you will tell him to. Problem is that you don't know what that position is since you have an element with variable height. If you put `bottom:0;' with absolute positioning the header will just go and sit at the bottom of its parent. Its parent in your case is the wrapper which has no specific height defined. So the #wrapper gets the height of its contents but since its contents are all absolute positioned inside it and as I said that breaks the flow it doesn't get any height from them. Instead the #wrapper gets the height of the window and not the whole document.
Best thing to do is redesign your page without absolute positioning.
Some quick fixes would be to give your wrapper a specific height like height: 1200px;
That will force your footer to go and sit at the bottom of those 1200 pixels
Example with height at wrapper
Another solution would be to use fixed positioning for your footer. That would make the footer stick at the bottom of the window even while it scrolls.
Example with fixed positioning
But really what you should do is redesign the page from the start and to avoid absolute positioning where its not needed.
Related
The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:sticky and position:fixed? I would also appreciate an example.
I have gone through https://developer.mozilla.org/en-US/docs/Web/CSS/position and a few other articles, but I still don't get it.
position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.
Without going into specific details, position: sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position. At least, that's how I understand it in theory.
The reason why I want to avoid going into details is because position: sticky is brand new, experimental (as shown in the document you link to), and not finalized yet. Even what I've stated above may well change in the near future. You won't be able to use position: sticky yet anyway (hopefully this will change within the next year).
Mozilla recently presented its implementation of position: sticky here. It's highly worth a watch.
See this self-explanatory example for better clarity. CODEPEN
Fixed Position:
An element with fixed position is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled.
It does not effect the flow of other elements in the page ie doesn't occupy any specific space(just like position: absolute).
If it is defined inside some other container (div with or without relative/absolute position), still it is positioned with respect to the browser and not that container. (Here it differs with position: absolute).
Sticky Position:
An element with sticky position is positioned based on the user's scroll position. As #Boltclock mentioned it basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed. When it is scrolled back it gets back to its previous (relative) position.
It effects the flow of other elements in the page ie occupies a specific space on the page(just like position: relative).
If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.
So if you want to achieve the fixed functionality but inside a container, use sticky.
Let me make it extremely simple.
fixed position will not occupy any space in the body, so the next element(eg: an image) will be behind the fixed element.
sticky position occupies the space, so the next element will not be hidden behind it.
Following image is fixed some part of image is hidden behind navbar, because Fixed element doesn't occupy space. You can solve this by adding margin or before/ after pseudo classes
This eg is of sticky position. Here Image is fully shown, nothing is hidden behind navbar because sticky elements occupy space in the document.
Suppose you have a navigation bar at the top of your website and you want it to be fixed so that as you scroll down the page, it's always visible.
If you give it position: fixed; then the page content at the top will be hidden below the navigation bar. In contrast, if you decide to give it position: sticky; top: 0;, the navigation bar will remain in the flow of the document, and gracefully pushes the content underneath it below, so no content is hidden.
When you apply position: fixed; the navigation bar escapes from the normal document flow, similarly to when you float an element.
fixed get fixed on both X and Y axis while sticky is fixed on X axis only.
sticky will be fixed only till the end of the container, but fixed will be fixed until the end of the webpage.
Fixed and Sticky both are very similar but there is one important difference between them -
1. position:fixed : It will directly fixed the element at provided location using top,bottom,left,right.
<div style="position:relative">
<p style="position:fixed; top:0px">paragraph with fixed position</p>
</div>
- here paragraph with fixed position will fixed always at top:0px.
2. position:sticky : It will not directly fixed the element at provided location. It will move element with scroll initially. It will fixed the element only if element reached to specified location using top,bottom,left,right. Until it will move with scroll.
<div style="position:relative">
<p style="position:sticky;top:0px">paragraph with sticky position</p>
</div>
- here paragraph with sticky position will fixed or stick only if element will reached to top 0px position.
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.
Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).
Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.
I have a wrapper surrounding a header with content inside as well as a container with content inside. The wrapper is really on there to keep everything positioned to each other accordingly within the confines I set, as well as to center everything. I have my container to automatically re-size according to the content that goes inside of it, this works without issue. However, the wrapper around the header and the container won't follow the same rule and ends up taking a height of 1px it seems. Please note: the code below will show the wrapper outlined by a dashed white border up at the top, it should instead wrap around everything it contains.
Here's the code to the website on jsFiddle.
Any help would be greatly appreciated. I feel as though I closed all of my floats, I don't see why the height: auto; on wrapper won't work, but maybe there's something I'm missing.
height: auto on #wrapper isn't working because virtually every element inside it has position: absolute.
What does position: absolute do? http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
In the absolute positioning model, a
box is explicitly offset with respect
to its containing block. It is
removed from the normal flow entirely
(it has no impact on later
siblings). An absolutely positioned
box establishes a new containing block
for normal flow children and
absolutely (but not fixed) positioned
descendants. However, the contents
of an absolutely positioned element do
not flow around any other boxes.
The choices to fix your problem:
Give #wrapper an explicit height - but that won't work if you don't know the height beforehand.
As #jeroen said: use JavaScript to set the height of #wrapper.
What you should really do is completely redo your CSS:
position: absolute is not how you should position every element on the page. You should use floats instead.
For a comparison of using position: absolute vs floats, see:
http://www.htmldog.com/guides/cssadvanced/layout/
You are using absolute positioning for the contents of the wrapper, #container and that takes it completely out of the document flow. The same applies to the contents of your header.
The only way to get your wrapper to wrap, is using javascript to calculate and set the height manually.
I have a page with divs 250px x 250px which are all positioned absolutely, when one of these divs are opened an ajax call is made which expands the div to show all its contents, these divs are restricted to 600px in width but can be any height depending on info being presented so when a div has alot of content it seems to stretch over my footer which is understandable due to the fact that the widgets hovering on the page.
My question though is can I somehow set my footer to clear this large widget as it seems to be stretching over it?
There is no way of clearing an absolutely positioned div, absolutely positioned divs are taken completely out of the document flow. You can have a look at using a sticky footer which should keep your footer at the very bottom of the page which should visually fix up your page as the footer will no longer abruptly end.
However unless you restructure your HTML or use some javascript to check the height of the div, you wont be able to have the footer appear nicely underneath the div using pure CSS.