0

I've got a strange problem with my website. I wanted to make a footer on the bottom of site, but it appears somewhere in strange place as in picture: Click to see the image

The blue highlight is footer position. Does anyone have an idea why is it placed here? I have to add that tag ends just after the footer's position, although it contains the whole website.

I tried switching off several CSS instructions in code, but this didnt help. Also, I checked if both sides are cleared. Any ideas?

UPDATED: Link to the website: CLICK HERE

Sorry I didnt link it to you, because it was on localhost back then.

Wiktor Zawierucha
  • 135
  • 9
  • Without seeing the full set of code, this is really only a guess, but you would want to go through everything before the footer and make sure all of your opening and closing tags match. I've had similar problems in the past when I've misspelled a
    tag or it was missing / in the wrong location.
     – gjanden Jun 17 '15 at 23:20
  • This may also be helpful: http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol – gjanden Jun 17 '15 at 23:28
  • Code added. Thanks for your response, for now the code looks good in code inspector. – Wiktor Zawierucha Jun 18 '15 at 14:42

4 Answers4

0

The footer has to be fixed to the bottom if the window. So to accomplish that You could try adding to your css:

Updated
Since your #footer doesn't have any width defined, the div is aligned to the right of previous div. If you have a width defined, it should work. Then you can use some margins to have some spacings between the divs. Define some width and have some text in the div to see where its aligned. You can also add display:inline-block.

sriinnu
  • 101
  • 1
  • 4
  • That's assuming OP wants it to be fixed. It's not implied in the question that's the case. It seems just out of place. – RPL Jun 18 '15 at 00:43
  • You're assuming that the footer has to be fixed to the bottom of the window. The footer is just out of place, as seen in the screenshot. Fixing it to the bottom of the window may not even have the desired effect, and regardless it's a messy/hacky fix to the issue, which seems to be positioning/syntax errors. – RPL Jun 18 '15 at 00:48
  • The question says why is it here. Where else is the possibility of having a footer? – sriinnu Jun 18 '15 at 00:50
  • It appears to not follow, as something is out of place. It's not clear that it's to be fixed, or just out of place. – RPL Jun 18 '15 at 00:53
  • I added the link to the post so you can see the code. – Wiktor Zawierucha Jun 18 '15 at 11:45
  • Also, it's not the #footer fault. Look at the #wrapper how it highlights, even it contains the whole website in it. – Wiktor Zawierucha Jun 18 '15 at 14:47
0

You may need to set "overflow:hidden", and/or "display:block" on the elements before your footer. Setting "overflow:hidden" on a parent element will cause it to become the height of its inner content.

Also, check for open tags that need closing. Good luck!

Myles O'Connor
  • 190
  • 1
  • 3
0

It's hard to tell because you just provided us a screenshot and no link or code. But, based on what I can see, you have the #wrapper div with a top CSS value. I would check your positioning in your elements. Hover over wrapper and see if the correct height is in blue. You may need to clear some elements, or change positioning (to relative, if not), or set display:block to them.

EDIT The reason your footer div is not at the bottom is because #content is not cleared, and is floating. I removed the float ("left" class) from the #content div. If you need that float, and according to your stylesheet main.css, you can either add a div.clear after #content, or wrap div#content with a div.row (according to your stylesheets, this will take care of clearing the float.

RPL
  • 3,500
  • 2
  • 21
  • 28
  • Sorry I didn't provide any code, because It could be everything and I would have to upload the whole page propably. I updated my post, there's a link. – Wiktor Zawierucha Jun 18 '15 at 11:46
  • Your footer appears empty. Can you clarify what is supposed to be in the footer? http://pasteboard.co/1jZ64tlO.png – RPL Jun 18 '15 at 19:47
  • it's supposed to contain some stuff like copyrights, that's not very important though. In addition, I don't want it to be position:fixed (project requires). For making a screenshot I set the footer height to 60px and I will do it for now. – Wiktor Zawierucha Jun 18 '15 at 21:09
  • Please check my revision to my answer. Also, I never suggested it to be position:fixed. – RPL Jun 18 '15 at 21:17
0

This may need a little tweaking to make it look just right, but it should get you started. Your clear div looks to be in the wrong place. It's inside the content div, which is the one that's floated. For the clear div to have the effect you need, it needs to be immediately after the content div, not inside it.

EDIT: After checking some more, you'll also need to add

top:50px;

to your footer styling, to match the position offset applied to the wrapper. But, if you move the clear div as stated above and add that to your CSS, your footer should appear in the right place!

BurningLights
  • 2,387
  • 1
  • 15
  • 22