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.
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'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'm currently working on a webpage.
Basically it's two sections. The main section is taking up all of the screen that the sidebar on the right isn't. The sidebar is fixed and set to 250px wide. The main section is set to 100% width with a margin-right of 250px.
Now I put down a few test blocks to see how it would look, they're 300px x 300px. As you can see, the last block on the top row goes behind the sidebar.
How can I make it go to the next line instead of going behind the sidebar?
Thanks in Advance.
The reason the block is not wrapping is because it is ignoring the margin right.
Without the CSS it is difficult to give an exact solution, but I would suggest a simple solution would be to float the side bar right and the main div left. Then you must remove the margin right on the main div.
This will allow you to keep your fixed pixel size, although using percentage in most causes is more suitable. I hope that helps.
Maybe the reason is width: 100% for the main section?
.main {
width: auto;
margin-left: 250px;
}
From the understanding of your screenshot, I assume you should add "Position" tag to determine the priority of the div and i suggest you to use % instead of px in nested div tags.
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/
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.