Relative positioning and a minor issue

So I'm working on a new layout (I should be working on my content-in-the-works but =P) and I'm having a few minor issues with it. The style is Sandstorm and the stylesheet is here. Please ignore the mismatched colors and images for the time being.

What I want is for it to be essentially two columns; on the left side of the page, the content followed by the disclaimer; on the right side, the banner followed by the left menu followed by the right menu.

Now let's say I want the disclaimer relatively positioned to the content. I have to set both of their positions to relative, right? I can't absolutely position the content and then position the disclaimer relative to that?

Even if I can, I need the disclaimer relative to the content and the right menu relative to the left, but the left menu should be relative to the banner, not the content/disclaimer. I can't figure out a way around this.

I've heard mention of z-indexing, but I'm not sure if this would help. What exactly does it do? Is there another way to fix the problem?

One other tiny random annoying problem: in the right menu (the bottom one) the header, "Hosted By" does not end when the links begin like the others do. And the header, "Credits" does not begin on a new line like the others do. I can't figure out why; it's coded exactly the same as all the others, as far as I can tell. Anyone know why they're the only ones crashing into each other like that?

Thanks. =)

I don't think you have a very clear idea of what relative positioning actually is. Relative positioning means shifting an element relative to where it would be if it weren't relatively positioned; it has nothing to do with relative to other elements. Relative positioning with no actual shifting is also used to make the element an offset container for absolutely positioned elements inside it (i.e. so that an absolutely positioned element with top:0 and left:0 would appear in the top left corner of the relatively positioned container), which may be what's confusing you, but that's only because the element must have some nonstatic positioning in order to be an offset container.

It sounds like what you'd want is to put the content and disclaimer inside one div and absolutely position that on the left side, then use a margin on everything else to keep it from going under the content/disclaimer.

Hmm, okay. "If it weren't relatively positioned" meaning where it would fall naturally on the page?

Hmm... if I add that in, won't I have to change the rest of the styles though? Nothing else has that kind of container set up; in the rest of the styles, the container contains the menu, disclaimer, and both menus.

Yeah, where it would fall naturally on the page.

Normally just adding an extra div, if it involves no other rearranging, won't change anything, if you just don't give that div any sort of styling in the other styles. The content, menus and disclaimer will all still be positioned relative to the same containers they were before by default; you need to specifically tell the new div to behave in this and that way for it to start affecting things.

I added the extra div and that seems to be functional somehow... but I think I'm still confused. How do you know where it would fall naturally on the page? And how do you get one item to follow another if you're not mistakenly using position:relative for that purpose?

By default (i.e. with position:static, the default value for the position property), all divs (and other block-level elements) simply go directly below the element that comes right before them in the source, exactly the way if you write paragraphs, they also go below one another (except paragraphs have margins by default that put some space between them, whereas divs do not). This only changes for elements with some other value for the position property or floating elements:

position:relative: Like static, except that you can give top/left/bottom/right values that will shift the element's position around, without affecting anything else.

position:absolute: Removes the element from the document flow, so that any static elements that come after it in the source will simply act like this one isn't there at all. Instead, the element is placed where you specify it (with the top/left/bottom/right values), relative to its offset container. The offset container is either the closest parent element with a non-static position or simply the document body. An absolutely positioned element will simply appear on top of whatever happens to be under it; it's up to the developer to not make an absolutely positioned element overlap some important content.

position:fixed - like position:absolute, except that instead of positioning the element relative to its offset container, it positions it relative to the viewport and stays fixed there even if the user scrolls up or down. Not supported by Internet Explorer 6, so don't rely on it for anything.

float:left/right - removes the element for the normal document flow; instead, it is placed at the left/right edge of its container and all content that it would overlap is displaced so that it instead appears at the right/left side of the floated element. Basically, if there's an image somewhere and there is text that smoothly wraps around the image, that's because the image is floated.

You can't get one item to follow after another unless it actually comes either directly after the other element in the source code or all elements in between them are either absolutely/fixedly positioned, floated or not displayed (display:none). What I told you to do was basically to absolutely position the content and disclaimer as a unit (so that then the disclaimer can naturally follow the content within that container), which then left all the other content, still statically positioned, naturally stacking in source order like static elements are supposed to do.

Ahh, okay! Thanks! That makes a ton more sense. I didn't know about position:static - when I didn't want absolute or relative (or didn't know what I should use) I just took the position element out. Could that have contributed to the problem? Also, if an element is positioned statically, there shouldn't be any margin/top/left/bottom/right values included with it, correct? Will it complicate things if there are?

So now I have a big, absolutely positioned container with everything but the banner in it. Inside that container, I have a smaller container with my content and disclaimer; that container is absolutely positioned with top:0px, left:0px, and right:660px so it doesn't overlap the banner/menus.

Then within the small container, the content and disclaimer are relatively positioned to set them in a little bit from where static would put them... I think.

Then outside of the small container but inside the big one are the left and right menu. They're relatively positioned to bring them in from the edge of the page and down from the banner. I think I did the menus right.

So I think I have this right... except the content is set down too far. I can fix that by making the top margin negative, but instead of just doing that randomly I want to figure out why I have to. The banner is positioned relatively; is that affecting where the content is placed, even though the content is within two absolutely positioned containers? That doesn't make sense to me. Edit: Setting the big container to top:0px fixed that. If I define something absolutely but don't give it any margin values (or leave out a few) will it position itself relatively with what I've given or statically if there's nothing?

Taking the position property out is the same as position:static - static is the default value for the property, so it's static unless otherwise stated.

Margins (i.e. the margin properties) are independent of positioning (including the top/right/bottom/left values); they just ensure some amount of empty space will be left on one side of the element from where it would usually be (or, for negative margins, allow the element to extend farther in that direction than otherwise). Actual margins can apply to static elements just like any other ones; top/right/bottom/left values won't do anything for a static element.

So now I have a big, absolutely positioned container with everything but the banner in it.

Click to expand...

...why, though? You shouldn't need this container absolutely positioned...? o.o

Then within the small container, the content and disclaimer are relatively positioned to set them in a little bit from where static would put them... I think.

Click to expand...

There's no need for that. You can just as well have them static...? Unless you're trying to get something a lot more complex going than I thought you were.

Then outside of the small container but inside the big one are the left and right menu. They're relatively positioned to bring them in from the edge of the page and down from the banner. I think I did the menus right.

Click to expand...

It would be easier to just leave it statically positioned and give it width:660px; margin-left:auto; margin-right:0;. This will give it a left margin that's however large it needs to be for the width and right margin to be as you've specified. Very handy.

Ah okay, so static elements can still have margin values. This seems so much cleaner now. =3

...why, though? You shouldn't need this container absolutely positioned...? o.o

Click to expand...

I suppose I don't. When I change it to static, the left menu moves down 100 more pixels than it normally would. I can fix it but I'm not sure why I have to; is it because the left menu would naturally start after the banner ends, because the elements between the banner and the left menu are in an absolutely positioned container? Therefore placing the left menu statically with a 110px margin gives it a margin from the banner, rather than from the top of the page?

There's no need for that. You can just as well have them static...?

It would be easier to just leave it statically positioned and give it width:660px; margin-left:auto; margin-right:0;.

Click to expand...

Changed both of those. Thanks Butterfree!

Now that I have the major issues out of the way, can anyone figure out what's causing this minor issue? It's in the bottom menu and I can't figure out why it's happening; it doesn't happen anywhere else and the coding there is the same as everywhere else. Here's a picture:



Any ideas? I can fix it by adding a break just before the "Credits" header, but this puts an extra space in for every other layout and I don't see why I should need to just in that one place when all the others work fine. But if no other possibility comes up, I'll just put the break back in.

I suppose I don't. When I change it to static, the left menu moves down 100 more pixels than it normally would. I can fix it but I'm not sure why I have to; is it because the left menu would naturally start after the banner ends, because the elements between the banner and the left menu are in an absolutely positioned container? Therefore placing the left menu statically with a 110px margin gives it a margin from the banner, rather than from the top of the page?

Click to expand...

That is correct. You don't have to, but it's simpler to simply give the left menu only a 10px margin and let the container be static, particularly since then you won't have to change the margin if you ever change the banner to be taller.

Your other problem might be a matter of giving your li elements display:inline. Make sure the Credits heading is within a block-level element?

Sandstone-Shadow said:

Now that I have the major issues out of the way, can anyone figure out what's causing this minor issue? It's in the bottom menu and I can't figure out why it's happening; it doesn't happen anywhere else and the coding there is the same as everywhere else. Here's a picture:

Any ideas? I can fix it by adding a break just before the "Credits" header, but this puts an extra space in for every other layout and I don't see why I should need to just in that one place when all the others work fine. But if no other possibility comes up, I'll just put the break back in.

Click to expand...

The difference between that and the links before it is that those two lists are in your right menu, while the others are in the left. If you look at the styling for the leftmenu and rightmenu lists, the leftmenu ones are floated to the left while the rightmenu ones aren't. Add float:left; to the rightmenu ul and it'll be fixed.

Gah ghost posts, double posting so you can actually see that.

Sorry for the long delay in response. That worked, Emerald Espeon. Thanks!

I think I figured out another reason why it was happening, too; I have some of the links in my right menu set so that on some styles I can make them images and in some styles I can make them text; the text ones (which I'm using on Sandstorm) are placed in <span> tags and the <span> tags weren't floated to the left either.

For some reason the link button image (for the hover-over buttons) was overlapping the next header instead of the next header ending right after it, but I was planning on hiding that image anyway. Everything is fixed now; thank you so much for your help guys! =)