For a lot of you this is easy but it's making me mad:
I have a webpage (black area) where div (red area) contains some content which I don't know how much is.
If the content is less then it needs to reach the logo, the logo should stay positionend in that point of my div, it shouldn't go up.
If the content is more, it shuld go down (keeping a fixed distance from text)
How to achieve this?
The min-height CSS property:
div { min-height:400px; }
http://jsbin.com/oxodak/2/
You want a "sticky footer", but contained inside a div instead of the whole page.
Tweak the method shown here: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Related
Working on a new design using bootstrap3 and trying to stretch the page so that even if there's not enough content to fill the page, the footer section would stay to the bottom.
The reason why I'm using position absolute, is because there's a link from the billing software that's being added within the content, I don't want to remove the link but position it a bit to the bottom in the footer section, in the center bottom, thus since I can't control where this will appear(do know where appears, just can't control), using position absolute on the specific element helps me here.
Now, that's not issue, just saying why I need to use position absolute and why I made the divs like this:
wrapper
>>wrapper_content
>>wrapper_footer
fiddle: http://jsfiddle.net/raicabogdan/jsk1b7ua/4/
the footer section is properly set to the bottom, however for some reason, the wrapper_content does not go 100% height automatically on load or on window resize. Also if you resize to mobile view, content will go down few table rows.
The content goes under the footer section.
What am I doing wrong here? Left a fiddle of the html page along with some css that I felt were needed above.
Hope there's someone that could get me out of this.
Cheers.
Try this link. I have used this method to get the footer to stay at the bottom of the window.
http://ryanfait.com/sticky-footer/
I know everyone has problems with their footers, and I have traversed many with no success in practice.
The height of my footer is 121px, the padding-bottom of the main content is 121px.
The elements are positioned absolutely, thus taking them out of the natural flow of the document. Could this be where the problem is?
The CSS is now too big to paste somewhere (unless you have a free 5 mins in which case its at I have stripped it of content and info for the js fiddle)
Thanks.
Clarification: essentially it's a 'sticky footer' so if the content doesnt fill the page the footer sticks to the bottom, then it will scroll down with content. However, the content goes underneath it and stays where it first was on the page.
i dont know what you exactly want to know.. but if you just want to know how your footer is on the bottom of your page, even if the page got scrollbars, you just have to give your css id bottomwrap the position fixed
#bottomwrap {
position: fixed;
}
I want to create a box-menu on the very bottom of the browser window.
It should stay at the bottom when the content doesn't fill up the entire screen
When the content overflows it should only be at the bottom when you scroll down (i.e. you can't see it if you don't scroll).
How do I do this?
I think what you are looking for is called a "sticky footer", and there are a couple of methods. I suggest you have a look at these sites:
http://ryanfait.com/sticky-footer/
http://www.cssstickyfooter.com/
Zoom in/out on each site in order to see how this appears when the content reaches the footer or does not.
Both methods fall short on one thing: They require you to know the height of the footer - but I have not seen any better solutions with only CSS.
I have a website with a blog and sidebar on the right hand side and it looks fine, however when I go onto page 2 of the blog, the sidebar moves down to the bottom of the page.
You can see what I mean by going to these links
http://www.beatinganger.com/blog (Sidebar looks normal)
http://www.beatinganger.com/blog?page=1 (Sidebar moves down to the bottom)
I have looked at the source code and I can see no changes in the difference between the 2 pages.
Any help would be much appreciated.
Your #left_container element on the sub-page is not being closed and therefore the #right_container element is being contained inside it.
The container div closing is causing a problem (as the other answers point out); also your div with the vertical_menu class is breaking out of its allotted size - which will probably cause float issues when your divs are closed:
Yeah, something is up with the template of the second URL, so that the sidebar is injected INSIDE the left 'main' column.
the #right_container http://www.beatinganger.com/blog?page=1 is in the different hierarchy than the enter link description here. #right_container and #left_container should be in the same parent and level as shown in the first link.
Another advise though, I notice that the content of the #right_container has slightly "wider" content than the container itself. Make sure the content elements are smaller or equal to the width of the parent container, or set #right_container -> overflow: hidden; a quick hackish way though.
How can I extend a div to the bottom of the page? Let's say I have a div that starts at the top, and has a background image I want repeated to the bottom of the page. How would I go about doing this?
Live example found here: http://mibsolutionsllc.com/ecgridos/about/ with the #content div.
Switch it around, have the background for your content as the body tags back ground then over lay the header over the top of it via a div or other element :)
CSS Sticky Footer does something similar, they've got a solution that seems to work on a whole range of different (including very old) browsers. If you don't need the footer you can always still use their solution and set the footer height to 0px.