I am having some trouble with the layout of a website that has a header, content, "sticky" footer, and a sidebar. The sticky footer, header and content combination is not a problem by itself, but I can't for the life of me figure out how to add a sidebar that goes from the header right down to the footer without messing up the "stickyness" of the footer.
The way I am approaching it now involves absolute positioning. I basically make a header div (height: 71px; top: 0px;), a footer div (bottom: 0px; height: 30px;), and a content div (top:71px;bottom:30px;). I then float the sidebar left inside the content div and make its height 100%, and add another div (call it "view") next to it for the actual site content. This makes sure the sidebar is nicely from the top to the bottom, and the footer is normally at the bottom of the page.
However, problems arise with this approach when the window is resized, especially so when the content is too large to fit in the "view" div itself. This results in the footer cutting off the content, and scrolling down makes the footer move up in the window. I would like to achieve a footer that behaves like this, but also have a sidebar that ALWAYS stretches from the header to the footer of the page.
If anyone could think of a way to add a such a sidebar to the page linked above or has any ideas on how I could go about tackling this problem, it would be greatly appreciated. Thanks beforehand.
Do you think you could post some example HTML and CSS you have besides just the div height and positioning?
What I was thinking is you could throw another <div> inside the sidebar <div> and set the margin-bottom or padding-bottom to 30px. I'll work on a jsFiddle for you.
You can always put an overflow: auto on your view div.
http://jsfiddle.net/dzRZd/
Edit:
With fixed positioning instead:
http://jsfiddle.net/ekSvQ/2/
Related
So, I have a navbar on the top, footer on the bottom and a big image in the center. I placed everything using margin (margin-top: 0 for nav, margin-bottom: 0 for footer and margin: 3% auto for image. The image is centered on my page and everything is allright. However, when I set position of nav bar to fixed, the margin for image seems to count from the beginning of page instead of the end of navbar (it causes my image to overlap with navbar instead of being in between of footer and margin). The only way I know to fix it is making a second, invisible div with the exact same size as my navbar, but I believe it's not the most practical way.
I don't know if putting HTML/CSS code is necessary there, I think I described everything important.
Thanks in advance for help
try position:sticky. it works best if you have fixed height of element.
Setting position: fixed removes the element from the document flow. One possible solution is to add a container for the content, in your case a container div for the image, and set a fixed top margin or top padding on the container for the height of your navbar.
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 have read a lot on google and here and I can't find a solution, I don't get it why do I get the scroll bar and I need to scroll down in order to see the footer, at this moment I don't have any content and it's not necesary to scroll down, as you can see here: [URL REMOVED], If I remove margin-top fro the logo than it works, but I need that margin-top there.Can you guys help me please to find a solution.
Best Regards.
You gave body a height of 100% and #wrap a min-height of 100%, so the footer is pushed outside of the viewwindow (which is what 100% height is). Try removing or lowering the value of min-height on #wrap and the footer will come up.
Edit:
If you're going to use the css from the page you linked, you can't add any vertical margin, padding or borders on anything. You are doing this on #logo and that's what's messing things up.
It seems you're doing this because you want the content to have a certain background, but you don't want this behind the logo. You can solve this by adding another div inside #wrap that wraps the content and give this the background. Leave the header white.
Summary:
Remove the margin-top on #logo.
Change the margin-bottom on #wrap to -54px.
Add a div for the content within #wrap for the background.
That should solve your problem.
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.