I am a beginner with a site made in Dreamweaver CS4 using HTML and CSS. Every page has a slightly different amount of content. The page content is designed to 'overlap' the footer, so that the top part of the footer can be seen behind the bottom of main content (images) and the bottom of the footer lines up with the bottom of the page.
I haven't been able to achieve a position where the footer allows for the same amount (height) of content to sit over it on every page, although I have been trying with changing all the margin and padding values etc. Currently the footer is jumping around from one page to another.
What I would like is for the footer to always be below all other content but with a negative top margin / padding effect, allowing the bottom of main content to sit on top of it - I just can't seem to make it happen! Advice would be very much appreciated. Thanks in advance.
Add this line before footer
<div style ="clear:both;" /></div>
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'm having trouble getting the footer on my site to work. The footer is broken down into two sections. First section is the mainFooter area and the second is kind of the like copyright area.
I have logos in the copyright area and a logo in the mainFooter. I need to have two of them be aligned at all times. It's really one logo but split into both footers because it's a stupid logo.
This is it:
Because of that line, we have to split the footer in two sections. But the text "Art now" can never be misaligned with the building.
So my solution to this was to using absolute positioning on both elements, set right:0 bottom:0 and adjust their position using margin-top/bottom.
Problem is, this only works when the logo is really far out and not truly aligned with the rest of the content on the page since everything else is mostly centered. That's what I mean:
Personally I don't care too much about the alignment of the logo on the far right, at that point you've reached the end of the page, it doesn't overlap with the content in the footer and still looks pretty nice, but our clients designer (not web) is a stickler for these things.
This is the dev site we're working on
Does anyone have any ideas on how we could handle this? Have the logos in the footer but make sure things are aligned properly and aren't overlapping with the content in the footer?
Put a container div around the footer content (and logo's) that has the following css:
.container{
width: 960px;
margin: auto;
position: relative;
}
Now your absolute positioned elements will be positioned relative towards this container div, and will not move too far to the right, but stay in the bounding box instead.
I have a page with 3 basic elements. You have your main content which runs down the center of the page at about 80% and has a white background. On the side of that main content you have the left and the right side at 10% each which for design reasons is grey. So far So good. Now I have my footer which as of recently was contained as a sticky footer and remained at the bottom of the page. I want the footer to be at 100% width and sit right under the content and if the page is being viewed on a screen that is too large then have the footer fill the rest of the page with white.
<p> I've tried everything that i know with the CSS I think I'm just missing something simple. I have to put some code in here to link to a fiddle </p>
Here is a link to the fiddle:
http://jsfiddle.net/dPek3/
You fake it by making your body background color the same color as your footer. You usually have to have a wrapper that contains your content to overlap this change, but it is extremely effective and I would recommend it. You also need to clear your floats. Here is a working example: http://jsfiddle.net/dPek3/1/
On this site design http://sproffer.joyatechsolutions.com/page/Pricing, I have positioned the footer at the bottom using some of the helpful information from this tutorial.(http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page)
However, as you can see in the link - when there is more content, instead of pushing down the content, the footer stays in the same place and the content just goes below it and then creates white space at the bottom of the page.
Any suggestions? Thanks!
your bottom div position is Absolute ( defined in style.css #bottom), just remove it and try if it works.
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;
}