Forum Moderators: not2easy
Why doesn't a designer just use Absolute positioning for most of the page instead of nesting things around with padding/margins? Wouldn't this be a better way of controlling the page and having a tighter grip on the design's layout?
If you use <div> tag for absolute positioning your elements, it will work excellent across Opera, Netscape and IE.
Barry
If you use <div> tag for absolute positioning your elements, it will work excellent across Opera, Netscape and IE.
Barry
I think the argument against it is pretty compelling. Absolutely positioning it means it works at one size and only one size. Using paddings and margins means it's going to work relative to itself. Using absolute positioning means each element will resize or move separately if the window is resized.
So...
I'm currently beating the heck out of myself trying to get an absolute positioning layout to work. I've never really used CSS positioning and am encountering stupid setbacks one after another because I'm doing it entirely the wrong way.
But I HAVE to do it, and this is the only way I can do it-- it's a long story, it's over in this thread [webmasterworld.com] and it's really stupid but has to be done.
My current problem?
Well, I've got the header and footer absolutely positioned. Fine; I can't believe it worked, but there it is.
Now?
The content that goes in between has to be positioned, and I don't know where it should go. See, the header may be a different size; it contains the title of the page, which differs (imagine that) from page to page. I don't know how big it will be in pixels. What should I do?
Well, at the moment the content simply overlaps the header, rendering the whole page illegible.
...
How do I position something relative to something else that's been positioned absolutely? I can't find a selector anywhere in the spec that says "put this one just under that one" or something similarly totally useful. :rolling eyes: Why can't the browser just READ MY MIND, darn it?
Header stuff...
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; top:5; left:10>image</div
</div>
The inner div is positioned absolutely within the parent i.e. the outer div (rather than the body of the document)
It means it doesn't matter what size the header is - the outer div is relative and will move up or down quite happily and the content is positioned within this moveable block.
Probably everyone else knows this but it took me an age to work out. Is this any help?
I have a stupid question. How do you position a div relatively?
postion: relative;
?
I've been researching absolute positioning all week because relative wouldn't do, so I don't know how to do relative. I'm a little sheepish... but I haven't been able to find anything about it that I understand.
I'm sorry, I just find CSS so dizzying. It seems simple but I keep having trouble. I can follow along in the spec but then I can't figure out how to write it.
This seems to make it the parent of the inner div and the absolute positioning is then to the relative div. And that does seem like the answer to your problem.
I find CSS a bit difficult as well - I've never read a decent explanation of all this positioning stuff and all the examples I've seen just used absolute positioning.
...
I'm totally lost. I wrapped both the header and the content in an outer div and then in their absolutely positioned internal ones, and now every single element on the page overlaps every single other element. It's an even bigger mess than it was-- but things I haven't touched have changed, too! So I'm absolutely, blindingly lost now.
I understand where ye are coming from.
It does take a while to get the hang of css.
I always try to think of each element(example <div id="#">
as a block with a height and a width.
The position of the block will be in relation to the 'top' of the Window/Page/Parent and left of the Window/Parent
depending on whether you use absolute or relative.
As far as I know, absolute means from the top and left of your browser window no matter what.
Type is css in Google and you should find some good articles.
Theres a good website I've been to a few times called
westciv.com
I find understanding css makes a huge difference in applying it when building a web page.
Take Care
Barry
Relative positioning is where an element, like a div for instance, is positioned relative to it's neighbour, ie... it both influences and is influenced by elements around them... except anything that's absolutely positioned.
The reason why it's "better" to position relatively is 'cos whatever happens to the browsing device, like a resize for example, all other relatively positioned elements will remain in "relative" order.
...Whereas absolutely positioned elements will just basically remain where they are as they're fixed absolutely to the position you set for it.
These are probably the most difficult concepts for newcomers to discern but when the penny drops, you'll start making rapid progress... I promise ;)
Anyway, I hope that makes sense.
I'm afraid Iguana's technique doesn't work. I set the relative positioning and the absolute positioning to be what seemed reasonable, but putting the absolute-positioned divs into the relative-positioned outer divs had no effect whatsoever. Perhaps I'm not doing it right, but it has no effect whatsoever.
It looks like I'm going to have to go back in and absolutely position the content div in every form separately depending on the size of the contents of the header. Which strikes me as inefficient, and there really should be a better way, but as far as I can discover...
<added> Oh, hey, sorry, I didn't see the replies in the middle. Had the window open and forgot to hit refresh before I replied.
I just found a page that suggests that relative positioning is indeed relative to other items. But then, how do you tell the relatively-positioned object WHICH object it's meant to position itself next to relatively?
I've read the spec over and over and I keep thinking ok, sure, I understand this. But then I can't apply it. It's endlessly frustrating.
</added>
[edited by: dragonlady7 at 7:05 pm (utc) on Sep. 18, 2003]
That's my understanding.
The idea is that the elements are positioned relative to one another, so that regardless of the size of the browser, they will remain in the same arrangement.
The absolute-positioning layout I'm doing now is different. The header is always 20 px from the top corner of the window. The footer is always 20 px from the lower corner of the window. If the window's too short, the footer overlaps the text. If the window's only 20 px tall, the footer will extend beyond the top of the window. The footer doesn't care where the header is.
My problem is not with the concept, but with the fact that relative positioning *doesn't work*. I have my content div set to be 50 pixels away from my header div, and it's not-- it's 50 pixels away from the upper left corner of the window.
My sinking worry is that I can only position the content div relative to the upper left corner of the header window, which is a net gain of absolutely nothing over the un-optimal solution of positioning it relative to the window corner. I don't care where the upper left corner of the header is in relation to my content; I care where the LOWER left corner is! If I don't know how many pixels tall it is, I can't position the div after it, and that's that!
So, I'm exceedingly frustrated by this whole thing.
how do you tell the relatively-positioned object WHICH object it's meant to position itself next to relatively?
It's to do with the order in which it appears in your source code.
One of the advantages of absolute positioning is that, because you can plonk the element anywhere on the page, it doesn't matter where in the source you write it's code.
Relatively positioned blocks however, need to be written (within source) in the order they appear on the page.
For example, within code, using relative:
<div id="1">HEADER</div>
<div id="2">CONTENT</div>
<div id="3">FOOTER</div>
Absolute allows you to write it differently:
<div id="3">FOOTER</div>
<div id="1">HEADER</div>
<div id="2">CONTENT</div>
Relative positioned blocks adhere to the, "...for every action, there is an equal and opposite reaction" kind'a philosophy, absolute's don't!
...and that's why when you have a mixture of relative and absolutes on the same page you find that when a different browser size is imposed you find the relative blocks appearing underneath the absolute one's... because the absolutes are not being influenced by it's neighbours.
Sometimes the results donīt bring you further but it helps understanding CSS
Best regards,
Prof
My problem is not with the concept, but with the fact that relative positioning *doesn't work*. I have my content div set to be 50 pixels away from my header div, and it's not-- it's 50 pixels away from the upper left corner of the window.
I've been wanting to learn CSS-p for myself for a while now, but this isn't for me. This is something i have to do, that has to get done. I can't do things just for the learning experience because I have people clamoring for results. Not the time to learn new things, but the things I already knew wouldn't work.
<added>
Wait a minute, margin will position it relative to the preceding "block" element? What does that mean precisely? What if my elements aren't all within the same block?
I have three divs. That's it. Will setting a margin on the second one position it to be under the first one, instead of overlapped by it?</added>
I have three divs. That's it. Will setting a margin on the second one position it to be under the first one, instead of overlapped by it?
I should'a pointed this out more explicitly in my last msg; If BOTH the HEADE & CONTENT div's are RELATIVE, then applying a margin-top: Npx; to the CONTENT div will "push" it DOWN from the HEADER by Npx
If it's overlapping, it would suggest to me that something is absolutely positioned.
From the top or the bottom of the header?
I have the header absolutely positioned because I need it to be a certain distance from the top and left of the page. If I can achieve that same effect by positioning it relatively, then I will. Would that be done with margins or padding?
I apologize for being so easily confused but it's a language I don't speak well. :/
I have the header absolutely positioned because I need it to be a certain distance from the top and left of the page. If I can achieve that same effect by positioning it relatively, then I will. Would that be done with margins or padding?
If you convert the absolute block to relative, and position it using margin-left and/or margin-top instead of TOP and LEFT, you should find that the CONTENT div will then (hopefully!) fall below the HEADER
I apologize for being so easily confused but it's a language I don't speak well.
"What is normal flow?" you ask.
Normal flow is the way a page would display if you had no positioning or floating. block elements are stacked, one on top of the other, starting at the first element in your document to the last element in your document. If a block element contains several other block elements, the parent grows so that it can fit all of its children. A box's margin adjusts its distance between the box above and below it. If two vertically adjacent boxes have margins set like this:
<div style="margin-bottom: 10px">text</div>
<div style="margin-top: 20px">text</div>
The margins collapse, to become the maximum of the two margins, in this case, there will be 20px of space between the two boxes. The rules for negative margins are slightly different, and the behavior around relatively positioned boxes is slightly different.
"What does ``taken out of normal flow'' mean?" You ask?
When a box is taken out of normal flow, it does not make a space for itself in the flow, it is as if the box doesn't exist at all. A box that is not in the normal flow will not displace the stacking of any other element, anywhere.
Instead, the box is offset relative to its containing box.
"What is a containing box?" you ask.
The root of the document is the initial containing box. Whenever you designate a box as absolute, fixed, or relative (I don't think there are others), you get a new containing box. In this example, the inner div will be absolutely positioned relative to the edges of the outer div.
<div style="position: absolute; width: 100px; height: 100px; border: 1px solid black;">
<div style="position: absolute; left: 50px; top: 50px; width: 50px; height: 50px; border-top: 1px solid red; border-left: 1px solid red">text</div>
</div>
"Ok, I think I've got all that, now, back to that relative positioning thing... what is the element relative to?" you ask.
If you don't specify an offset, then nothing. The box will still lay out as if it was a normal, staticly positioned box. If you do offset the box, then boxes below it are positioned as if you had not offset the box.
How about an example. I want a titlebox, a border around my content, with a description of the box along the border. Here's some HTML:
<div class="title-box">
<div class="title-box-title">Title</div>
<p>Content
</div>
So my plan is to add some margin and padding to the title-box, then relatively position the title-box-title on top of the border. Content inside the title-box should behave as if the title-box-title doesn't exist. (As an additional benefit, this will still look OK in a text-only browser, because the title is a block-element). Let's try:
.title-box {
margin: .5em;
border: .1em solid black;
padding: .5em;
}
Ok, here we've got a margin, border, and padding.
.title-box-title {
position: relative;
display: inline;
border: 1px solid;
border-width: 0 .1em;
padding: 0 .5em;
top: -1.1em;
background-color: white;
}
Ok, so we'll move the title of the title-box up onto the border.
.title-box-title + * {
margin-top: -1.1em;
}
But that causes a problem, because we have to add a rule like this to get the content inside the title-box to behave as if the title-box-title doesn't exist. Hrm... Let's try again...
.title-box {
position: relative;
margin: .5em;
border: .1em solid black;
padding: .5em;
}
Make the title-box establish a new containing box for positioning.
.title-box-title {
position: absolute;
display: inline;
border: 1px solid;
border-width: 0 .1em;
padding: 0 .5em;
top: -.6em;
left: 1em;
background-color: white;
}
Then have the title-box-title be absolutely positioned (so it no longer is in the flow) and adjust the offsets to match. No we don't need the rule with the '+' selector, which IE doesn't understand.
Further Reading:
CSS2 Section 9.8 Comparison of normal flow, floats, and absolute positioning [w3.org] which supplies many examples with pictures of the use of floating, relative, and absolute positioning.
This methoed helps me see the big picture and figure out how the page was constructed and helps my understanding of laying out a page a little more with CSS.
The DOMI has no equal, anywhere.
So, that was my solution. Thanks, everyone, for your help. I'm still tidying things up, so if anyone has any other brilliant ideas for me to try, I'm game. This project has caused me far more grief than it should have, but it's at least been educational. :D
So, again, thank you everyone, and not just for helping me to understand the relative merits of absolute and relative positioning.
I do still have one question--
What's the difference between absolute and static positioning? I only see reference to static positioning now and then, and it's never clarified what that means. Is it yet a third type, or is it simply a variant way of referring to one of the types I already know about?
Static is the exact same as relative, except static will disregard any css *positioning* command, such as top:5%, or left:3%. It still "flows" the same as a relative object, so a statically positioned element takes up space just as a relative does.
The 4th and ill-supported property (very poorly supported by any version of IE, in particular) is fixed positioning.
Now, just as relative and static are cousins, think of fixed and absolute as rather similiar, in that both do not affect the "flow" of the document (they don't take up space). They differ in that fixed will place an object with respect to the SCREEN, whereas absolute will place an object with respect to the document. So when using fixed positioning, even if you scroll up or down, your fixed position object doesn't move.
Just remember this: the only way to move a fixed element once your page has loaded is to move your monitor :) (well, this is how its supposed to behave, anyway)
