HTML5 Footer in the wrong place?

If you are using HTML5 and you've used the footer element, you are likely to notice that your footer moves up to the top of your page, below the header, instead of staying down at the bottom of your page where it belongs. It is super annoying but there is a pretty quick fix.

In your CSS:

Using footer as the selector (or a class/id if you prefer), set the position to absolute. Set directional properties left and bottom to 0.

Don't forget that if you are using an absolute position, you do have to set a containing element with a position (probably relative). If you do not already have a containing element with a set position, you might want to set "body" to relative.

You may find at this point that the footer is still overlapping more then you would like. Try changing the value for "bottom" to a different number (with a set unit). If you want the footer to move lower you may need a negative value.

If your footer still won't position itself where you want, let me know. I would be happy to help you troubleshoot!

Text-wrapping issues?

If you are having trouble getting your image and text to position properly, and you are using the CSS "float" property, try the following:

In your HTML page:
Make sure that your image is inside of the element that contains your text.

Give your image a class or id.

In your CSS style sheet:
Tell your image to float to the left or right.

If this does not work, there may be another element or property elsewhere in your code that is having an impact. If you think that is the case and another floated object is effecting your image/text, you can always use the "clear element" where you want the other float to stop taking effect. Values for clear are left, right, and both.

If this doesn't help, please let me know and we will figure it out!