image moves according to screen size

[jester18]

Hello All,

 

I have an image which contionously moves depending on different screen sizes, or browser size not quite sure. I used absolute positioning first however I found out relative positioning is better.

 

heres is my css

 

#ucd{

position: relative;

top: -540px;

margin-left: 170px;

}

 

still keeps moving when I look at the page on my friends desktop...any suggestion on how to keep the positioning the same?

 

 

attached is an example of how i am structuring the Div's. The surrounding div's are floated left and right and stay in the same position but the centre image named "ucd" keeps moving.

 

 

 

[attachment deleted by admin]

[haku]

Your best bet is to not use absolute or relative positioning. Floats are the best way to layout your pages. Spend some time reading up on how to use them properly. I recommend this as a starter:

 

http://css.maxdesign.com.au/floatutorial/

[jester18]

Hello,

 

Thanks for the reply. I have used floats on all the surrounding squares I just don't know how to float the middle square without it disrupting the surrounding float's position. I want it postioned exactly in the middle of the surrounding divs(just not sure how to achieve this). Please check out the attached image to see what I am refering to. thank you!

[michaellunsford]

The image looks like you have properly floated container divs of equal size - which is a good thing. To get your inner elements to center properly, you can simply assign them "margin:auto" (provided they have a height and width assigned as well).

[jester18]

thank you very much, worked perfectly!