Positioning and anchor tags...

[zygh]

when using positioning for page layout i have a page with a fair bit of text and i use named anchors to navigate the page but the problem lies in the fact that when i click on one of the links it puts that portion at the top of the window... which is conveintly under my header div

so the question is how do i make the named achors when clicked go to the top of the content div not the window...

[Kravvitz]

You mean you're using absolute positioning?

Try putting the anchors in the positioned elements.

Floats and margins are better.

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

http://garyblue.port5.com/webdev/floatdemo.html
http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

Curing Float Drops and Wraps

http://www.alistapart.com/articles/negativemargins/

http://www.alistapart.com/articles/practicalcss/

[zygh]

ok this is what i got
even thought the images aren't there...

http://faysart.awardspace.com/webonly.htm


when u click on the names of the poems....

u'll see what i tried to describe.....

[Kravvitz]

You need to move the scrollbar from body to the div that needs to scroll. You'll need to do some other tweaking as well.

body {
  overflow: hidden;
}
div.content {
  overflow: auto;
}

[djvern]

I have a similar problem. I've applied the scrollbar to my main content div, and I have a header and footer div all styled as follows:

#header1 {
	position: fixed;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: #FFFFFF;
}
#footer {
        position: fixed; 
	z-index: 1;
        bottom: 0px;
        left: 0px;
        background: #FFFFFF;
}
#main_content {
	position: absolute;
	z-index: 0;
	overflow: auto;
	width: 100%;
	top: 120px;
	left: 0px;
	right: 0px;
	bottom: 23px;
}

To get fixed positioning working in IE I've applied an external javascript. The div scrollbar works fine in Firefox/Safari etc but not in IE 6 - a whole page scrollbar is visible and when I put anchors into the main content div I have the problem that the content with the anchor goes to the very top of the page - i.e behind the header div. Go here to see what I mean - click on one of the names:
http://www.romanian-culture.org/personalities.htm

So, my question is, is there any workaround for IE?!

[djvern]

Ok, after trawling the web I've realised that there's no easy solution. I really don't want to use frames so here's my compromise:

#header1 {
	position: absolute;
	z-index: 1;
	top: 0px;
	left: 0px;
	background: #FFFFFF;
}
#main_content {
	position: absolute;
	z-index: 0;
	overflow: auto;
	width: 100%;
	top: 120px;
	bottom: 0px;
}

This gives a header and scrollable main content div with working anchors in Fx/Safari etc and in IE it just appears as a single scrollable page. (i.e the header scrolls with the content). I've completely removed the footer as this was more hassle than it was worth. I've also removed fixed positioning as the scrolling of fixed position divs in IE looked shoddy with the JS I was using anyway. So, no IE support for what I wanted to achieve, but as my client uses Safari I should get away with it!