Position it with:
.chart {position: relative; }
position:absolute; takes it out of the document's flow, so it's not accounted for with scrollbars. position: relative; keeps the element in the flow, so you can still scroll to it.
Edit
In response to Michael's comment:
I'd like it to be centered vertically. Is it possible with relative positioning?
Yes, it is. And it involves a little jiggery-pokery, but I'm using FF3.0.11/Ubuntu 8.04, so the weirdness may be platform dependant.
First define the top-left corner of the positioned element:
.chart {position: relative;
width: 50%;
left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
margin: 25% 0 0 -25%;
}
To explain the margins:
I tried initially to use the same positioning I'd use with position: absolute; (top: 50%; left: 50%;), but that didn't work. I'm not sure why, exactly, though I suspect that it's related to how the height of the percentage is calculated. Still, trial and error (and this is why I noted my browser/platform above) found that 25% seemed to place the origin (top left corner of .chart) in the right place.
The 25% then represents only my best-guess of vertically-centre. The -25% is easier to understand, it's the usual 'horizontal-center minus half the element-width' thing. Although you could maybe more-easily just use width: 50%; margin: 0 auto; to achieve the same thing.
I don't understand why positioning with the usual top: 50% didn't work, but I am using a css-reset stylesheet (specifically Eric Meyer's 'reset reloaded' stylesheet, found here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
It's worth noting that the page appears consistently-with-Firefox in Midori (which, I think, uses the Webkit rendering engine), and I'll be uploading the demo page shortly (to: http://www.davidrhysthomas.co.uk/so/rel-pos-centre.html) for public ridicule review for differences.
And also, if anyone could help out and explain the weirdness in having to vertical-position with margins rather than top: xx that'd be appreciated.
