jester18 Posted October 31, 2010 Share Posted October 31, 2010 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] Link to comment https://forums.phpfreaks.com/topic/217394-image-moves-according-to-screen-size/ Share on other sites More sharing options...
haku Posted November 1, 2010 Share Posted November 1, 2010 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/ Link to comment https://forums.phpfreaks.com/topic/217394-image-moves-according-to-screen-size/#findComment-1128814 Share on other sites More sharing options...
jester18 Posted November 1, 2010 Author Share Posted November 1, 2010 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! Link to comment https://forums.phpfreaks.com/topic/217394-image-moves-according-to-screen-size/#findComment-1128959 Share on other sites More sharing options...
michaellunsford Posted November 1, 2010 Share Posted November 1, 2010 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). Link to comment https://forums.phpfreaks.com/topic/217394-image-moves-according-to-screen-size/#findComment-1129005 Share on other sites More sharing options...
jester18 Posted November 1, 2010 Author Share Posted November 1, 2010 thank you very much, worked perfectly! Link to comment https://forums.phpfreaks.com/topic/217394-image-moves-according-to-screen-size/#findComment-1129108 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.