shane18 Posted December 19, 2009 Share Posted December 19, 2009 Doesn't the margin only make sure a box is so far away from another box? <div style="position: absolute; left: 50px; margin-top: 200px; width: 200px; height: 100px; border: 1px dotted #FF6600; color: #FF0000;"> TEST </div> Why does the margin stuff push the div 200px downwards if it is set to absolute and theres nothing above the div... Can someone explain to me why margin/position stuff works like this? Confuses me so much! Quote Link to comment Share on other sites More sharing options...
premiso Posted December 19, 2009 Share Posted December 19, 2009 What browser version are you using? That is very important, try that code in Firefox and see if you get the same results. If you are using IE6, well that is why. IE6 is just fubar when it comes to CSS and you have to code it a certain way and that often break Firefox, so yea. It is an endless loop of sucks and you have to hack the style sheets or create multiples. But depending on what browser you are using to test, their could be several answers. Quote Link to comment Share on other sites More sharing options...
shane18 Posted December 19, 2009 Author Share Posted December 19, 2009 Latest version of Firefox - of course Quote Link to comment Share on other sites More sharing options...
shane18 Posted December 19, 2009 Author Share Posted December 19, 2009 the code is working 100% perfectly the way i want it too.. im just wondering why if u position something absolutly... why does margin move it when its designed to space it away from another box.. not move it around? Quote Link to comment Share on other sites More sharing options...
premiso Posted December 19, 2009 Share Posted December 19, 2009 Well I would suggest reading this: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ He wrote a pretty good article on that and the difference, chances are what you think it means is completely different then what it actually means. Quote Link to comment Share on other sites More sharing options...
shane18 Posted December 19, 2009 Author Share Posted December 19, 2009 I read the entire article on that link u posted... i understand the position thing... its margin that confuses the hell outa me... can u explain margin to me a bit please? so far u been a big help Quote Link to comment Share on other sites More sharing options...
premiso Posted December 19, 2009 Share Posted December 19, 2009 As far as I was taught, a margin is the space around an object. Think of it link in Word when creating a document, you have a margin border around the whole document, same deal. So when you say margin-top, it spaces the item that far from the top margin, etc etc. That is the best way I know how to explain it. A way to see this, is the following code: <div style="position: absolute; left: 50px; margin-top: 200px; width: 200px; height: 100px; border: 1px dotted #FF6600; color: #FF0000;"> TEST </div> <div style="position: absolute; left: 50px; margin-top: 205px; width: 200px; height: 100px; border: 1px dotted #FF6600; color: #FF0000;"> TEST </div> You will see that the second div will now be on top of the first just 5 pixels below it. Hopefully that clears it up a bit. Quote Link to comment Share on other sites More sharing options...
shane18 Posted December 19, 2009 Author Share Posted December 19, 2009 Holy shit, it clicked man... thanks I fully understand this now after all these years of just thinking it works so w/e... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.