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
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"
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
Put your absolutely positioned div inside a relatively positioned div wrapper.
See
http://www.barelyfitz.com/screencast/html-training/css/positioning/ (tab 4)
http://css-tricks.com/absolute-positioning-inside-relative-positioning /
North America
Europe, Middle East and Africa
Asia Pacific