I've started coding a really simple layout I made sometime last year, I've finished most of it, when I discovered when the 'wrapper' div doesn't touch the bottom of the page, as if it has the "position: fixed" style on it, but it doesn't have that style. And I'm also stuck on why the Footer div isn't at the bottom, its right below the "topbar" div.
I'm really confused because I have no idea why the footer and the wrapper divs aren't working properly ;(
I've published it to my site on the link below so you can check the html/css.
HenryNorthen.com
Elements that float consume no space in the layout; everything after your header is floating, so nothing's there to push the footer to the bottom. Instead, the floating elements "float" away from the footer, which is placed right after the header.
If you add this to the style of your footer, it should solve this problem:
clear: both;
Related
I'm working on a static site that has a side nav on some pages and the nav is meant to stick to the bottom of the screen while scrolling. How can I get the nav to stop sticking at the bottom of the parent container? The nav should stay inside the parent.
Right now it continues to stick even after the container is out of view and eventually overlaps the footer.
Here's the demo site:
https://blissful-kare-3ae082.netlify.app/checklist.html
Your element has the attribute "fixed-bottom" as one of its classes. This will affix the y-axis placement of your navigational element to the bottom of the screen, not to the bottom of the parent container.
There are a couple of things you can do to clean this up. If you just want it not to overlap, you can add padding to the bottom of your element; I found that padding it with 100px worked cleanly as in the picture below.
You may also look to affix it to the actual parent container with usage of the "relative" tag, the solution of which is discussed in various other posts on this site:
Fixed position but relative to container
I have two divs on different z-layers. The sidebar div (in red) on the left and the main div on the right. Both have a 2 divs embedded.
The (red-background-colored) sidebar div stops as intended at 50% of the page. However, I fail to hide the overflow [SHOULD NOT BE SEEN. BUT IS VISIBLE.] of this div. Thus it overlays the main div's second inner div [BLOCK RIGHT].
Here is the dilemma, seen in the right hand side with the white background.
http://jsfiddle.net/brazim/v6rk1b4q/39/
Motivation for this layout: With Javascript the user will be able to display either the full content of the sidebar or the main content by dragging the right-hand-side edge of the sidebar div to the left or right.
I can handle the javascript, only the correct overflow is missing.
Thanks for any hints in JsFiddle.
Elements with position: fixed do not relate to its parent container, but to the viewport, so it is not affected by the overflow setting. You should use absolute positioning for that, or, if you need to fix it (consider that, in the case of the sidebar, it is already fixed by its parent) use an alternative solution like display: none
Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Fixed_positioning
When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?
Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.
IMAGE: http://go-dl.eve-files.com/media/1310/image.png
I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.
There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.
Here is my code:
PASTEBIN: http://pastebin.com/xbvPEfjA
I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!
in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.
i have a problem with a stuck down footer not been pushed down by 2x DIVs in the main content area.
www.superwideprint.com/swp2
for some reason the 2 content containers arnt pushing the footer down when the screen resolution is low, i have added a clear:both div above the footer but to no avail.
can anyone help me please.
style sheet and main page can be seen from the link above. been at this for hours now.
The footer's position is set to absolute, so the content div is not going to affect it. Setting the position to relative will not help either, as this means your bottom: 0 code will push it to the bottom of whatever it is in, not the page.
What you're after is a sticky footer, try this http://www.cssstickyfooter.com/ or http://ryanfait.com/sticky-footer/
The reason is the #footer DIV is position:absolute. So, remove position:absolute form your footer.
A part from that your want your footer always stay at bottom then you can use Sticky Footer technique. Check this http://ryanfait.com/sticky-footer/
I have a div-layout on my asp.net page.
Left a div for menu, middle a div for content and right a div for a online user list.
All divs are with float:left and height/width on his place and it works problemless.
Now I must have a advertise over the left and the middle div together.
My first try was to have it in the middle and set margin-left:-270px;.
But the the advertise-div is OVER the menu and you cant click anything anymore.
My second try is to have it in the left div and overflow it easyly on the middle div, but that of course don't work, because the left menu div has a width: 300px; and exacly there end the banner.
here is it to see:
http://s3.imgimg.de/uploads/4b247298bJPG.jpg
how to do?
It's hard to tell without seeing your HTML/CSS, but perhaps the easiest way would be to to put the advert in it's own <div> under all of the left, middle, right divs, and use something like margin-top: -110px to shift it up.
It's not a very clean solution. If you can't get this to work, or just plain don't like it, then post your code.