Parts of my page move while others don't

HTML & CSS
1

Hello!

I’m developing a new website and am having a problem; when I resize my window, everything “moves” correctly except for my login and “sitetools” (logout, admin buttons) which I’ve placed in the banner. In addition, I’ve noticed on different size screens it winds up in surprising places. I think that it may be due to my lack of understanding as to what absolute and relative positioning do (this is my level of CSS knowledge!), but Icould be mistaken. :slight_smile:

Anyway, the problem can be seen at:
myalgebrabook.com

On that page, I’ve included what should be the necessary CSS to point out the issue; however, I’d be more than happy to provide the more complete style sheet for my site if you might think that it’s due to some sort of weird Cascading.

Thank you for looking into this.

-Eric

2

An element that is positioned absolutely will be positioned in relation to its nearest parent that has position absolute or relative. In the absence of such a parent, the viewport gives the positioning context.

In your case, you need to add position: relative to the header div:

#header {
	background: url('/images/Banner.jpg');
	height: 120px;
	width: 960px;
        [COLOR="Red"]position:relative;[/COLOR]
}

You may also want to change the positioning of the form, as it will move position a little bit now that it is measuring its position from the left side of the header.

3

Thanks so much for such a clear answer; it was both easy to implement the change, and I have a much better understanding of how “position” works.

-Eric