CSS Positioning Problems

[trundrumbalind]

Ok, I'm just messing around with some CSS Positioning here but having a few problems...

Check out www.smelltheglove.net/css. If you want to view the CSS file, it's at www.smelltheglove.net/css/style.css.

Ok now, why does the box on the bottom left not skip down 5px? I've given that box the "position: relative; top: 5px;" style and it works for the "Login" box but then the browser doesn't seem to remember that the login box is 5px down and so, the "Useful Links" box doesn't come down enough.

I'm explaining this really badly but I think just looking at it should give you an idea. In the code, the header boxes that say "Navigation, Login etc" are defined by the style named "boxtitle" and the contents are named "sidebox".

Any help would be awesome. Thanks guys...

[Ankou]

First I just want to say....

You're reusing your IDs for CSS. You don't want to do that - you should use classes instead. Only use an ID (for CSS) once per page - but classes you can use as many times as you need to on the page.


Now because of that you'll have to make a few changes to the code before a fix will work. Meaning either you define more IDs or change some IDs into classes (#boxtitle and #sidebox for example).


Try giving the "Useful Links" box position: relative; top: 10px; and you'll see that you get some space between "Useful Links" and the bottom of the "Login" area.

position: relative; top: 5px; means that the element will be placed 5px down from the top of where it would normally appear (in the Normal Flow of the page). When you did that to the login area you're actually pushing the whole box down 5px which intrudes into the area below (5px).

So you "cover up" the top of the element below by 5px. Since that element is being pushed down 5px as well (with position: relative; top: 5px;) it looks like it's right (and it is). However that means that when you use that same positioning call on the "Useful Links" box that it's not down far enough to show space b/n the two elements. Using top: 10px; for the "Useful Links" div will make up that space.


BTW - is there a reason you're using position: relative; top: 5px; as opposed to just using margin-top?