Skip navigation
Currently Being Moderated

Absolute Positioning a div

May 2, 2011 7:38 AM

I am trying to position a twitter icon at the top right of the page.  I put the gif into a div box and used this css code:

 

.container #twitter {
    position: absolute;
    top: 5px;
    left: 900px;
    height: 25px;
    width: 25px;
    margin: 0px;
    padding: 0px;
    z-index: 1;   
}

 

The icon moves depending on screen size, which I don't want.  I want it to always be in the same spot no matter what size screen, right above some text.

 

Thanks for any help you can provide,

 

Gary

 
Replies
  • Currently Being Moderated
    May 2, 2011 8:00 AM   in reply to garynng

    You need to put the absolute float in a container to control the position.

     

    <div class="twitter-container">

     

    <div class="twitter-feed">code</div>

    </div>

     

    float "twitter-container" left with a width

     

    float twitter-feed absolute

     

    twitter-feed will be absolute positioned to it's container which is "twitter-container"

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2011 8:14 AM   in reply to garynng

    The actual display of your <div> will very depending on whether or not it's parent container (<div>) also has a declared position.

    That is, if it's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

    So be sure to give a declared position to both the parent and the child <div>.
    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2011 1:01 PM   in reply to garynng
     
    |
    Mark as:
  • Currently Being Moderated
    May 2, 2011 7:33 PM   in reply to garynng

    Don't use left, use right positioning in # pixels from the right side of the page.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points