CSS Magic: Float an object outside of the content area

Johnny asks “How do I float an object outside of the content area, at the bottom of the screen?”

Birds, Clouds, and Ninjas on a secret mission all have one thing in common – the ability to float. Your website is capable of this same sort of wizardry, check this out

Lessons from this video:

  • Make sure your floating element isn’t too big!  You don’t want to distract visitors!
  • A small colorful (non rectangle shaped) image is best
  • It’s a great way to draw attention to a special offer, new event or coupon code
  • Download the PSD file for the orange 3.0 circle image here
  • See the page from the video AND learn how to make a virtual scavenger hunt

Now, onto the good stuff!  Below you’ll find the code used in the video!  It’s time to fire up WordPress and start floating stuff!

Copy the following CSS code in your themes CSS file:

#floating {

bottom:0;

right:0;

position: fixed;

z-index: 9999;

}

Now, wrap something (text, image, video) in a DIV tag, like this:

<div id=”floating”>PUT SOMETHING HERE</div>