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.
Related
I've got a fixed header element that I would like to stay fixed on scroll. The scrollable area, however, I would like it to be positioned directed after the fixed element, but I don't want to use position: absolute and remove it from the document flow.
I've created a Codepen here to illustrate the problem I'm having. I would like the red element (.top) to stick on scroll, without hiding the first list item.
Is there a way to go about doing this in CSS (possibly using flexbox) that doesn't require any JS?
Any help is appreciated.
Thanks in advance!
If my understanding of your question is correct, you want to make no changes except for the scrollable content to not be hidden behind the fixed header.
The fixed header seems to have a natural height of nearly 20px.
So you can apply a top margin to the scrollable content which pushes it down from the top, until it clears the header.
Try adding this to your CSS:
div.list { margin-top: 20px;}
This will push the div containing all the list items 20px from the top.
DEMO: http://codepen.io/anon/pen/EVWYJd
UPDATE
The answer above works when the height of the fixed header is known. But based on feedback in the comments, the height of the header varies. So a solution is needed that keeps the scrollable content beneath the header regardless of the height of the header.
This issue has been addressed in these posts:
How do I use CSS to position a fixed variable height header and a scrollable content box?
Creating a variable height "fixed" header in CSS with scrollable content
I have a div of unknown height (it loads dynamically based on content). It is floating to the right. I have a footer that I want to have go after that (also a div) that would just fill the entire width of the page. However, because the other element is floating, the footer does not appear at the bottom. Is there any way to resolve this using divs?
For your css styling you can use clear:both before the footer which will sometimes fix it.
There are a lot of different ways to do footers, if what you're doing doesn't work for you.
Since it can be a pain to get footers to stay at the bottom, I like to make my background-color of the page whatever I want my footer to be, and then have a <div> of all my content on top of that. Then after the content I can put whatever text I want in my footer (in another <div>) and it always appears like the footer is at the entire bottom.
You can get more fancy with the stylings of course. Hope this helps!
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.
I am working on a website which has two containers: sidebar and the main content.
The problem is that when minimizing the window (only) the left sidebar fits the size of the current size of the screen and when scrolling down the sidebar disappears.. This only happens when the content container (on the right) doesn't fill the screen..
You can try and minimize this page you'll see that the left side bar disappears when scrolling down when window is minimized.
You can try a good page with more content, you'll see that all is fine here..
I tried height="100%" and width="100%"
OK Figured it out
I had to add:
min-height: 100%;
to the body
and use
bottom: 0;
on the sidebar
Thanks for your help :)
The main issue is that the wrapper and sidebar elements in your body are absolutely positioned - therefore the body does not know how to expand to the size of the content of the page itself, as absolutely positioned elements are taken out of the flow of the document. In this case, you have taken all the content of the page out of the document flow.
Therefore, setting a height, or min-height, to the body element will not work, as it will only take on the height of the viewport and nothing else. The children container, being absolutely positioned, will then also take on the height of the viewport.
Scrolling is still possible on the merit that content is overflowing from either one of the absolutely positioned children.
You can try setting height: auto on the sidebar element. Alternatively, you should float your wrapper and sidebar (and take out absolute positioning) - that will at least place the content back into the document flow, allowing the browser to compute the actual 100% height :)
Absolutely positioning is a little bit of a tricky issue, I have to admit.
I'm guessing the containers are divs?
The width should be 100% as you have it there, but for the height, try: line-height:100%.
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.