SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping an item(div) floated on top of a page

    Good morning everyone,
    I need a way to place an item, say a div or an image over a page. I just saw an example similar to what I am looking for. There is a form at the bottom right corner of the Sitepoint home page. It moves with the window size and does not stay behind.

    I tried using a simple CSS only method. By making a div 100 percent wide, absolute positioned and then placed an image in the background. The imaged is positioned to the top right.

    This works well but with one problem, when the window is re-sized and you scroll using the horizontal scroll bar the image is left behind in the window.

    I am thinking this is only possible with JavaScript.
    What are your thoughts?

    IC

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Your description sounds odd. Do you have a working example? From what you describe, I'd expect the image to follow the div around. We need to see some code at least.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Your description sounds odd. Do you have a working example? From what you describe, I'd expect the image to follow the div around. We need to see some code at least.
    Here is an example I just put together. It is a little different.
    Because I placed a Div in the absolute positioned div and floated it right:

    Code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Test</title>
    
    <style type="text/css">
    body{
    position: relative;
    margin: 0;
    padding: 0;
    }
    
    #container, #content{
    width: 960px;
    margin: 0 auto;
    background-color: #999999;
    }
    
     #content{
     width: 500px;
     height: 400px;
     background-color: #000000;
     margin: 0 auto;
     }
    
    #adBox{
    position: absolute;
    width: 100%;
    height: 100px;
    }
    
    #adImage{
    background-color: #FF0000;
    float: right;
    width: 100px;
    height: 100px;
    }
    
    
    </style>
    
    </head>
    
    <body>
    <div id="adBox">
    <div id="adImage">
    </div>
    </div>
    
    
    <div id="container">
    
    <div id="content">
    </div>
    
    </div>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you noticed how the red box stays behind when you scroll horizontally when the window is re sized?

    IC

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I would adjust the CSS to this:

    Code:
    #adBox{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    right: 0;
    }
    
    #adImage{
    background-color: #FF0000;
    width: 100px;
    height: 100px;
    }
    That keeps the red box in the top right corner (where you seem to want it). BUT if the viewport bets smaller than the 960px of the content box and then you scroll, the box will still stay put. But that's a rare situation. If you remove this

    Code:
    #container, #content{
    width: 960px;
    }
    It won't happen any more.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You aren't thinking of position:fixed are you?
    Code:
    #adImage {
        background-color: #FF0000;
        position:fixed;
        right:0;
       top:0;
        width: 100px;
        height: 100px;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •