13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

Need help doing a floating div in Wordpress...

by kymobilemedia
11 replies
  • WEB DESIGN
    • |
I want to be able to float a div/widget outside of the main content area on a wordpress page.

I am using OptimizePress theme.

I want to be able to float a widget/div outside of the main content area on the right side of the page. I have seen where people have done this before, but having a hard time understanding how to do it.

I found plugins that will allow floating widgets inside the content area, but I want it to appear outside of the main page, and look like it is floating down the page with maybe a shadow underneath.

Any help would be greatly appreciated.

Current working page can be seen at Test Page | Get Him to Marry Me
I want a floating div with an iframe code to appear outside of the main area on the right side and float down the page..


Thanks
Jason
#div #floating #wordpress
  • Profile picture of the author 3Knikkers
    With css

    #your-div-name {
    position: fixed;
    top: 1em;
    right: 1em;
    }
    Signature

    A responsive web is a better web

    {{ DiscussionBoard.errors[7185575].message }}
  • Profile picture of the author kymobilemedia
    Thanks for the reply. Sorry for being a newbie, but where would I put my div content? I can put the above css in the custom css panel in wordpress, but not sure where to put my div content so that it shows up.

    Thanks a bunch.

    Jason
    {{ DiscussionBoard.errors[7185592].message }}
  • Profile picture of the author kymobilemedia
    Also, this div needs to float down as you scroll down the page.
    {{ DiscussionBoard.errors[7185614].message }}
  • Profile picture of the author mgreener
    Hi,

    You will need to dig into Appearance > Editor in Wordpress and edit the corresponding template file.
    Signature
    2 Free Pro List Building Templates - Turbocharge Your Opt Ins
    {{ DiscussionBoard.errors[7185683].message }}
  • Profile picture of the author 3Knikkers
    Doesn't matter were you put the div. Just after the <body> is good. And best way to let the div float down as you scroll down the page is to use a jQuery script. Google for it !
    Signature

    A responsive web is a better web

    {{ DiscussionBoard.errors[7185813].message }}
  • Profile picture of the author kymobilemedia
    Yes, I can get into the editor, but need to know where to put my Div so that it will be to the right of the main content and float up and down the page. Will the css provided above make it float?

    Any ideas on where to put my DIV in the editor?

    Thanks
    {{ DiscussionBoard.errors[7185821].message }}
  • Profile picture of the author kymobilemedia
    Thanks. My last reply was before I seen your reply. I will try it out and see what happens.

    Thanks
    Jason
    {{ DiscussionBoard.errors[7185823].message }}
  • Profile picture of the author kymobilemedia
    Also, if I do want to float it, do I need to change the position: fixed to anything else?

    Thanks guys!
    {{ DiscussionBoard.errors[7185862].message }}
  • Profile picture of the author kymobilemedia
    Well, I did the css above, and it is allowing my div to overlap my other content. Is there a way to allow it to make the page scroll to the right if needed instead of overlapping my content?
    {{ DiscussionBoard.errors[7185882].message }}
  • Profile picture of the author Greg71
    Find the extreme outside div, probably in your "Page Template" file. It would be the first div in the code I guess. Sometimes it's called "wrapper" in the css.

    Put the floating div next to that using "float: left;" in it's attributes. Put the code directly after the outside div's closing tag.

    This will make the whole site wider though, to allow for the extra div outside there.
    {{ DiscussionBoard.errors[7188105].message }}
    • Profile picture of the author Greg71
      Originally Posted by Greg71 View Post

      Find the extreme outside div, probably in your "Page Template" file. It would be the first div in the code I guess. Sometimes it's called "wrapper" in the css.

      Put the floating div next to that using "float: left;" in it's attributes. Put the code directly after the outside div's closing tag.

      This will make the whole site wider though, to allow for the extra div outside there.
      To see how divs behave (to test), I sometimes just make an empty html document on my desktop and put some dempty divs on it, each with a different colored border ( style="border: 1px solid blue/black/red;" ).

      The first div, in your case, would have to have ( style="margin-left: auto; margin-right: auto; float: left;" ), then the next div ( your fixed position one) should automatically butt up next to it due to the float attribute in that first div.

      If it doesn't, just add a "float: left;" to it as well. To move it away from that first div, just add "margin-left: 5px;".

      So your code for the whole page would be :

      ...
      <body>

      <div style="border: 1 px solid blue; width: 900px: height: 500px; margin-left: auto; margin-right: auto; float: left;">
      <div style="border: 1px solid red; width: 100px; height: 100px; float: left; position: fixed; margin-left: 5px;">

      </body>...

      you may not need that float attribute in the second div, I'm using an ipad aand can't test, but it's roughly like that that would allow you to scroll right etc.

      The red bordered div is the one you're adding to your page, so you just have to find the closing tag for the blue div.

      Make sense? Hope so.
      {{ DiscussionBoard.errors[7189359].message }}

Trending Topics