Constraining text within certain limits?

This has me seriously lost. I have no clue what I'm doing.

http://www.yougetwhatyouwant.org/jk/header.php

If you look at that and scroll up or down, you'll notice that the text goes well over the spacing at the beginning. Bothersome, because I need it to scroll up or down but keep that constraint. How can I do this?

 

That's a bit of an extensive trick, and a lot easier if you don't have to worry about Internet Explorer 6 - just use position: fixed and give your header a z-index. See elliquiy.com's homepage for how that works - I just set it so it would degrade gracefully in IE6.

To work with IE6 you'll need to fix the background image and position a centered header (it can't be full-width otherwise it will obscure the scroll bar) as a completely separate div outside of the main content, and just pad the top of your content by the size of the header.

 

I just tried that method out... Now it won't scroll over the header, but it won't scroll at all. >.<

 

Well, your basic structure is going to look like

html, body { height: 100%; width: 100%; overflow: hidden; } - the last removes the extraneous scrollbar in IE.

You will then have a set of divs depending on your exact goals. For your background, you can have two divs with scroll: fixed background images. Your header would then be css-centered and absolutely positioned:

div#header {
position: absolute;
top: 0;
left: 50%;
margin-left: -300px; /* half the width of the item being centered */
z-index: 10;
}

Your content div will look a bit like

div#content {
padding-top: 150px; /* or however much is needed, margin doesn't work in firefox for this purpose */
margin: 0 auto;
}

etc.

 

...doh.

Obviously, you need to wrap the content in an overall header with overflow: auto specified, else you're not going to see any scroll bars, ever : )

 

I just made the damn header.