homepage Welcome to WebmasterWorld Guest from 54.166.66.204
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Absolute Positioning and Positioning With Padding/Margins/Etc...
Uses and Differences
ThisEndup




msg:1185538
 4:22 pm on Sep 17, 2003 (gmt 0)

I've been looking at a lot of CSS designs lately and noticed the majority use padding and margins everywhere to design their layouts instead of positioning most of the things on their design with Absolute Positioning.

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?

 

AWildman




msg:1185539
 4:38 pm on Sep 17, 2003 (gmt 0)

I've found that absolute positioning is very hard to do cross-browser and platform. I can never make elements line up the same in two different browsers using abs positioning. I can, however, manage to get the padding and margins working so that the final position is the same.

Barry




msg:1185540
 11:07 am on Sep 18, 2003 (gmt 0)

Hi Guys,

If you use <div> tag for absolute positioning your elements, it will work excellent across Opera, Netscape and IE.

Barry

Barry




msg:1185541
 11:07 am on Sep 18, 2003 (gmt 0)

Hi Guys,

If you use <div> tag for absolute positioning your elements, it will work excellent across Opera, Netscape and IE.

Barry

dragonlady7




msg:1185542
 3:31 pm on Sep 18, 2003 (gmt 0)

I am absolutely stumped by absolute positioning. It's, right at this very moment, driving me nuts. Pull up a chair and watch me totally lose it, if you like. I should sell tickets.

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?

Iguana




msg:1185543
 4:03 pm on Sep 18, 2003 (gmt 0)

I've just been doing some work on a page that has to cope with the header being visible or not. I did it like this:

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?

dragonlady7




msg:1185544
 5:17 pm on Sep 18, 2003 (gmt 0)

It's taken me quite a while to puzzle out what that actually means.
So, your outer div is relative, which means it stays roughly in the upper left part of your screen or page or whatever. OK. And then, inside it, you put the inner div, which you position absolutely where it ought to go.
Which means it positions absolutely but only relative to the outer div, which moves itself as needed within the window.
...
That sounds like it would work. Good idea!
So I could use two sets of those-- one for the header, and then underneath it I could put the div with the page content in it, and the relatively-positioned div would position itself under the first one, and then within it, the absolutely-positioned div would do what it's supposed to. Right? Am I right? That sounds like it would be perfect. Thanks!

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.

Iguana




msg:1185545
 5:36 pm on Sep 18, 2003 (gmt 0)

Yes - <div style="position:relative"> does it or position:relative in the CSS

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.

dragonlady7




msg:1185546
 6:13 pm on Sep 18, 2003 (gmt 0)

So, just "position:relative;" and that's it? It positions itself relatively? Relatively to what? I don't understand. Don't I need to set some kind of parameters or whatever those are called? Like top:5px, left: 5px, only whatever that would be if it were relative instead, but I haven't any idea what it would be because I can't find a relative example...

...

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.

Barry




msg:1185547
 6:35 pm on Sep 18, 2003 (gmt 0)

Hi Guys,

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

TheWhippinpost




msg:1185548
 6:37 pm on Sep 18, 2003 (gmt 0)

Absolute positioning can be plonked anywhere on the page and nothing around it is influenced by it's presence.

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.

dragonlady7




msg:1185549
 6:53 pm on Sep 18, 2003 (gmt 0)

OK, have sorted some things out.

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]

ThisEndup




msg:1185550
 6:57 pm on Sep 18, 2003 (gmt 0)

So if everything on the page is positioned relatively, and the user resizes his browser, everything will reposition itself to fit into the resized browser now? I'm kinda confused!

dragonlady7




msg:1185551
 7:25 pm on Sep 18, 2003 (gmt 0)

>the user resizes his browser, everything will reposition itself to fit into the resized browser

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.

TheWhippinpost




msg:1185552
 7:27 pm on Sep 18, 2003 (gmt 0)

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.

ProfMoriarty




msg:1185553
 7:36 pm on Sep 18, 2003 (gmt 0)

Maybe another idea for a similar technique to relative positions: just play around with padding and margin, give them negative values and see what happens.

Sometimes the results donīt bring you further but it helps understanding CSS

Best regards,

Prof

TheWhippinpost




msg:1185554
 7:43 pm on Sep 18, 2003 (gmt 0)

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.

If you've set these parameters to a relative positioned block, instead, use, as the Prof mentioned, margin-top: Npx; to position it Npx's under the preceding block element.

dragonlady7




msg:1185555
 7:55 pm on Sep 18, 2003 (gmt 0)

Thanks, guys. I'll try the margin thing next. I've been trying to keep things as simple as possible.

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>

TheWhippinpost




msg:1185556
 8:06 pm on Sep 18, 2003 (gmt 0)

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.

dragonlady7




msg:1185557
 8:45 pm on Sep 18, 2003 (gmt 0)

>margin-top: Npx; to the CONTENT div will "push" it DOWN from the HEADER

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. :/

TheWhippinpost




msg:1185558
 9:28 pm on Sep 18, 2003 (gmt 0)

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.

No need for apologies, as I said, it's a confusing concept at first ;)

drbrain




msg:1185559
 10:46 pm on Sep 18, 2003 (gmt 0)

An important thing to remember is absolutely positioned boxes are taken out of the normal flow.

"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.

ThisEndup




msg:1185560
 1:11 am on Sep 19, 2003 (gmt 0)

What I've been doing lately is printing the webpage as seen through a browser, then priting the css, and then the HTML. I lay it out in front of me and then see how the page was put together. It's hard trying to do that on the computer because you have to switch so many screens cause the HTML, CSS, and design are all seperate.

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.

drbrain




msg:1185561
 4:07 pm on Sep 19, 2003 (gmt 0)

ThisEndUp: I highly recommend Mozilla's DOM Inspector for disecting layouts, you can quickly see which elements are positioned where, what styles and rules are applied to them, etc.

The DOMI has no equal, anywhere.

dragonlady7




msg:1185562
 4:42 pm on Sep 19, 2003 (gmt 0)

Thank you all so much for explaining that to me. This is a lot to take in. I'm going to print this out and follow ThisEndUp's advice and try and get it working.

dragonlady7




msg:1185563
 8:20 pm on Sep 22, 2003 (gmt 0)

Well, just to finish things off-- I ended up using relative positioning for most of the elements, but couldn't use it to position the footer at the bottom of the page.
So, I positioned the footer absolutely, and set it to be invisible in those instances where it would overlap the text on the screen. (In no case did it overlap during printing; the forms were all meant to be one page and indeed were, and so that wasn't a problem. But on the screen, there were occaional problems.)
I used @media print {
.hiddenScreen {
position: relative;
visibility: visible;
display: inline }
}
for the footer, so that it only showed when it printed in those forms.
The boss said it was OK if some of the forms didn't show the footer on the screen, because the on-screen view was merely to confirm which form it was.
If it was a problem, I would have added a second copy of the footer, positioned relatively, and set to be visible on the screen and hidden when printed. So that it would always look like it was there, but always be in the right place for both media.

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?

aevea




msg:1185564
 11:17 pm on Sep 22, 2003 (gmt 0)

Static is normal, default, positioning. If nothing is declared the a block is considered static. It's not offset from where it would appear in the normal flow of the document (not relative), and it does take up space in the normal flow (not absolute).

SethCall




msg:1185565
 3:29 am on Sep 23, 2003 (gmt 0)

Again on whats the difference between static and absolute: remember this simple rule.

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)

waxbird




msg:1185566
 3:32 am on Oct 30, 2003 (gmt 0)

Thank u:)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved