I personally do not move things at all with position: relative. Instead of moving the box like you think it is, you are only moving the visual representation of the box. I think of floating on the ocean's surface, looking down at concrete blocks laying on the ocean floor (the block elements) who all have a thin metal plate laying on top of them. When you say "position: relative" on those elements, the plate lifts up a bit, but is attatched by a chain. So, from above it still looks the same. Then when you do the left: whatever or top: whatever, the metal plate moves around. The concrete block doesn't move at all though-- and so the "space" from where it "was" is actually still occupied. That's why other blocks can't move into its space.
If you used margins to move the block around, you'd really be moving the concrete too, as does floating them (but floating created "new rules" that you work with). If you use position: absolute, you've taken the concrete off from the ocean floor and turned it into a floating mattress : ) Which of course also now has no effect on the other blocks still on the ocean floor, nor do they have any effect on the mattress. That's what's brittle or dangerous with absolute positioning-- that thing is blind to the page and can only see it's last positioned parent... and the page is blind to it.
Floating has some differences between IE and the Rest Of The World, though they can be dealt with. By the specs, floating something automatically makes it a block (if it wasn't already), but instead of trying to be 100% width of its parent like static blocks, floats should shrink wrap (though it seems every browser does this a bit differently, so usually you'd set a width on them). Floats act a bit like Post-It notes, where their tops are indeed connected to their parent elements, but their bottoms stick out from the page-- and in Modern Browsers, this means the container cannot see the bottom of the float (like the concrete blocks couldn't see the mattress), so they collapse their heights. Internut Exploder wraps the floats if the container Has Layout (incorrectly). Enclosing floats is a topic of its own-- Gary has a page about it http://gtwebdev.com/workshop/floats/enclosing-floats.php Floats also have different rules when it comes to other floats and margins, instead of acting like static block elements, which allows you to do Holy Grail-type layouts.
99% of all my positioning is with margins and floats. They are robust, work like you need them to 90% of the time (and the rest, you either need a small Haslayout hack for IE or you need one of the more brittle methods instead).
I'm no expert, but I can fake one on teh Interwebz
Guru
Posts: 2834
Joined: 2004-09-01
Location: MA, USA
post the code something
Posted: Fri, 2008-08-29 00:00
post the code
something more is happening than your brief non-explanatory title tells
Leader
Posts: 848
Joined: 2008-02-04
Location: Netherlands
And... floated elements do
Posted: Fri, 2008-08-29 08:14
And...
floated elements do NOT normally leave any space behind... but moving things with position: relative DOES.
I'm no expert, but I can fake one on teh Interwebz
Regular
Posts: 14
Joined: 2008-08-04
Stomme poes
Posted: Fri, 2008-08-29 09:03
floated elements do NOT normally leave any space behind... but moving things with position: relative DOES.
My apologies, you are correct.
So I guess my question is: How can I prevent things which have been moved with 'poition:relative' from leaving a gap behind?
Leader
Posts: 848
Joined: 2008-02-04
Location: Netherlands
Cheeky answer: float them :
Posted: Fri, 2008-08-29 13:45
Cheeky answer: float them instead : )
I personally do not move things at all with position: relative. Instead of moving the box like you think it is, you are only moving the visual representation of the box. I think of floating on the ocean's surface, looking down at concrete blocks laying on the ocean floor (the block elements) who all have a thin metal plate laying on top of them. When you say "position: relative" on those elements, the plate lifts up a bit, but is attatched by a chain. So, from above it still looks the same. Then when you do the left: whatever or top: whatever, the metal plate moves around. The concrete block doesn't move at all though-- and so the "space" from where it "was" is actually still occupied. That's why other blocks can't move into its space.
If you used margins to move the block around, you'd really be moving the concrete too, as does floating them (but floating created "new rules" that you work with). If you use position: absolute, you've taken the concrete off from the ocean floor and turned it into a floating mattress : ) Which of course also now has no effect on the other blocks still on the ocean floor, nor do they have any effect on the mattress. That's what's brittle or dangerous with absolute positioning-- that thing is blind to the page and can only see it's last positioned parent... and the page is blind to it.
Floating has some differences between IE and the Rest Of The World, though they can be dealt with. By the specs, floating something automatically makes it a block (if it wasn't already), but instead of trying to be 100% width of its parent like static blocks, floats should shrink wrap (though it seems every browser does this a bit differently, so usually you'd set a width on them). Floats act a bit like Post-It notes, where their tops are indeed connected to their parent elements, but their bottoms stick out from the page-- and in Modern Browsers, this means the container cannot see the bottom of the float (like the concrete blocks couldn't see the mattress), so they collapse their heights. Internut Exploder wraps the floats if the container Has Layout (incorrectly). Enclosing floats is a topic of its own-- Gary has a page about it http://gtwebdev.com/workshop/floats/enclosing-floats.php Floats also have different rules when it comes to other floats and margins, instead of acting like static block elements, which allows you to do Holy Grail-type layouts.
99% of all my positioning is with margins and floats. They are robust, work like you need them to 90% of the time (and the rest, you either need a small Haslayout hack for IE or you need one of the more brittle methods instead).
I'm no expert, but I can fake one on teh Interwebz
Regular
Posts: 14
Joined: 2008-08-04
Thanks very much for that
Posted: Fri, 2008-08-29 17:25
Thanks very much for that informative post.
I have gone through my code and updated a lot of positioned elements and used margins instead.
Thanks again
Moderator
Posts: 5960
Joined: 2004-06-25
Location: Dallas
Wow!
Posted: Fri, 2008-08-29 18:26
Some great metaphors? analogies? Either way, good stuff.
cheers,
gary
A pianist who has learned the wrong system of fingering cannot become a virtuoso until he has laboriously taught himself the proper method.
My site is slo-o-owly being reconstructed; visit anyway.