Okay, I see what you mean now. I've got a couple of solutions for you, but they both share one problem. You have to make the title width equal to the width of the scroll area minus the width of the scrollbar.
This width can't be computed. Now, I'm sure that if you used a slightly different element structure to what I've proposed, you could simply set the width to 100% and not worry about it, but then I haven't used said structure, so I can't test it!
The First Solution is to take the title out of the scrolling area and move the scrolling area up beneath it. Pad the scrolling area accordingly to leave room for the title and give the title a background color so that you cannot see the text that goes beneath it.
The Second Solution is similar but in the positioning of the title. It now sits within the scrolling area, but it has a `fixed` position and the scrolling area has a `relative` position. Again, pad accordingly and use a background colour. I'm not quite sure on the state of IE's support for `position:fixed`, but this is my preferred solution.
Here they are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scroll Test</title>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
font-family: "Trebuchet MS", Helvetica, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 1.6em;
}
#main {
background-color: #CCC;
width: 500px;
}
#scroll {
height: 400px;
padding-top: 1em;
overflow-y: scroll;
}
#spacer {
padding: 1em;
}
h2 {
position: relative;
z-index: 2;
font-size: 12px;
padding: 1em;
margin: 0 1.5em -3em 0;
background-color: #CCC;
}
</style>
</head>
<body>
<h1>Scroll Test</h1>
<div id="main">
<h2>Title</h2>
<div id="scroll">
<div id="spacer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus volutpat libero. Nullam pellentesque semper urna. Vestibulum sed augue vitae elit consequat iaculis. Praesent quam ipsum, cursus eget, sollicitudin ac, aliquet vel, metus. Nulla facilisi. Maecenas sed justo et justo porttitor euismod. Vivamus mollis nibh ut neque. Pellentesque urna mauris, tempus nec, tincidunt in, suscipit et, risus. Donec mattis sem id nisl. Donec tristique, justo vitae auctor rutrum, nunc tellus cursus lacus, sit amet tincidunt nisl odio et lorem. Integer bibendum, ipsum a lobortis consectetur, diam quam volutpat dui, eget porttitor enim nisi eu nulla. Ut urna dolor, sollicitudin ut, vehicula eget, tempus quis, tellus. Curabitur eget lorem at nisl ultrices lacinia. Ut justo massa, porttitor sit amet, rhoncus et, scelerisque nec, purus. Curabitur molestie, nisl et cursus vulputate, ante lacus varius nibh, non aliquet libero massa non eros. Quisque ante erat, iaculis sit amet, consequat a, congue at, est.</p>
<p>Mauris ultricies ornare nibh. In eu lacus id lacus congue viverra. Duis vel elit. Suspendisse metus. In non urna at mauris dictum ornare. Etiam fermentum, ipsum tristique pretium pharetra, eros felis tempor dui, ac condimentum lorem magna a nunc. Duis scelerisque urna vitae nisi. Sed facilisis mauris tempus tellus. Etiam ac diam. Phasellus dictum laoreet nulla. Fusce aliquam, libero a gravida mollis, purus ipsum molestie risus, sed imperdiet nisl sem eget nunc. Vestibulum eget nulla in tellus mollis facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus volutpat libero. Nullam pellentesque semper urna. Vestibulum sed augue vitae elit consequat iaculis. Praesent quam ipsum, cursus eget, sollicitudin ac, aliquet vel, metus. Nulla facilisi. Maecenas sed justo et justo porttitor euismod. Vivamus mollis nibh ut neque. Pellentesque urna mauris, tempus nec, tincidunt in, suscipit et, risus. Donec mattis sem id nisl. Donec tristique, justo vitae auctor rutrum, nunc tellus cursus lacus, sit amet tincidunt nisl odio et lorem. Integer bibendum, ipsum a lobortis consectetur, diam quam volutpat dui, eget porttitor enim nisi eu nulla. Ut urna dolor, sollicitudin ut, vehicula eget, tempus quis, tellus. Curabitur eget lorem at nisl ultrices lacinia. Ut justo massa, porttitor sit amet, rhoncus et, scelerisque nec, purus. Curabitur molestie, nisl et cursus vulputate, ante lacus varius nibh, non aliquet libero massa non eros. Quisque ante erat, iaculis sit amet, consequat a, congue at, est.</p>
<p>Mauris ultricies ornare nibh. In eu lacus id lacus congue viverra. Duis vel elit. Suspendisse metus. In non urna at mauris dictum ornare. Etiam fermentum, ipsum tristique pretium pharetra, eros felis tempor dui, ac condimentum lorem magna a nunc. Duis scelerisque urna vitae nisi. Sed facilisis mauris tempus tellus. Etiam ac diam. Phasellus dictum laoreet nulla. Fusce aliquam, libero a gravida mollis, purus ipsum molestie risus, sed imperdiet nisl sem eget nunc. Vestibulum eget nulla in tellus mollis facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus volutpat libero. Nullam pellentesque semper urna. Vestibulum sed augue vitae elit consequat iaculis. Praesent quam ipsum, cursus eget, sollicitudin ac, aliquet vel, metus. Nulla facilisi. Maecenas sed justo et justo porttitor euismod. Vivamus mollis nibh ut neque. Pellentesque urna mauris, tempus nec, tincidunt in, suscipit et, risus. Donec mattis sem id nisl. Donec tristique, justo vitae auctor rutrum, nunc tellus cursus lacus, sit amet tincidunt nisl odio et lorem. Integer bibendum, ipsum a lobortis consectetur, diam quam volutpat dui, eget porttitor enim nisi eu nulla. Ut urna dolor, sollicitudin ut, vehicula eget, tempus quis, tellus. Curabitur eget lorem at nisl ultrices lacinia. Ut justo massa, porttitor sit amet, rhoncus et, scelerisque nec, purus. Curabitur molestie, nisl et cursus vulputate, ante lacus varius nibh, non aliquet libero massa non eros. Quisque ante erat, iaculis sit amet, consequat a, congue at, est.</p>
<p>Mauris ultricies ornare nibh. In eu lacus id lacus congue viverra. Duis vel elit. Suspendisse metus. In non urna at mauris dictum ornare. Etiam fermentum, ipsum tristique pretium pharetra, eros felis tempor dui, ac condimentum lorem magna a nunc. Duis scelerisque urna vitae nisi. Sed facilisis mauris tempus tellus. Etiam ac diam. Phasellus dictum laoreet nulla. Fusce aliquam, libero a gravida mollis, purus ipsum molestie risus, sed imperdiet nisl sem eget nunc. Vestibulum eget nulla in tellus mollis facilisis.</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scroll Test</title>
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
font-family: "Trebuchet MS", Helvetica, Verdana, Arial, sans-serif;
font-size: 12px;
line-height: 1.6em;
}
#main {
background-color: #CCC;
width: 500px;
}
#scroll {
position: relative;
height: 400px;
width: 500px;
overflow-y: scroll;
overflow-x: hidden;
}
#spacer {
padding: 2.5em 1em 0.5em 1em;
}
h2 {
display: block;
width: 450px;
position: fixed;
z-index: 2;
font-size: 12px;
padding: 1em;
margin: 0 1.5em -3em 0;
background-color: #CCC;
}
</style>
</head>
<body>
<h1>Scroll Test</h1>
<div id="main">
<div id="scroll">
<h2>Title</h2>
<div id="spacer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus volutpat libero. Nullam pellentesque semper urna. Vestibulum sed augue vitae elit consequat iaculis. Praesent quam ipsum, cursus eget, sollicitudin ac, aliquet vel, metus. Nulla facilisi. Maecenas sed justo et justo porttitor euismod. Vivamus mollis nibh ut neque. Pellentesque urna mauris, tempus nec, tincidunt in, suscipit et, risus. Donec mattis sem id nisl. Donec tristique, justo vitae auctor rutrum, nunc tellus cursus lacus, sit amet tincidunt nisl odio et lorem. Integer bibendum, ipsum a lobortis consectetur, diam quam volutpat dui, eget porttitor enim nisi eu nulla. Ut urna dolor, sollicitudin ut, vehicula eget, tempus quis, tellus. Curabitur eget lorem at nisl ultrices lacinia. Ut justo massa, porttitor sit amet, rhoncus et, scelerisque nec, purus. Curabitur molestie, nisl et cursus vulputate, ante lacus varius nibh, non aliquet libero massa non eros. Quisque ante erat, iaculis sit amet, consequat a, congue at, est.</p>
<p>Mauris ultricies ornare nibh. In eu lacus id lacus congue viverra. Duis vel elit. Suspendisse metus. In non urna at mauris dictum ornare. Etiam fermentum, ipsum tristique pretium pharetra, eros felis tempor dui, ac condimentum lorem magna a nunc. Duis scelerisque urna vitae nisi. Sed facilisis mauris tempus tellus. Etiam ac diam. Phasellus dictum laoreet nulla. Fusce aliquam, libero a gravida mollis, purus ipsum molestie risus, sed imperdiet nisl sem eget nunc. Vestibulum eget nulla in tellus mollis facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus volutpat libero. Nullam pellentesque semper urna. Vestibulum sed augue vitae elit consequat iaculis. Praesent quam ipsum, cursus eget, sollicitudin ac, aliquet vel, metus. Nulla facilisi. Maecenas sed justo et justo porttitor euismod. Vivamus mollis nibh ut neque. Pellentesque urna mauris, tempus nec, tincidunt in, suscipit et, risus. Donec mattis sem id nisl. Donec tristique, justo vitae auctor rutrum, nunc tellus cursus lacus, sit amet tincidunt nisl odio et lorem. Integer bibendum, ipsum a lobortis consectetur, diam quam volutpat dui, eget porttitor enim nisi eu nulla. Ut urna dolor, sollicitudin ut, vehicula eget, tempus quis, tellus. Curabitur eget lorem at nisl ultrices lacinia. Ut justo massa, porttitor sit amet, rhoncus et, scelerisque nec, purus. Curabitur molestie, nisl et cursus vulputate, ante lacus varius nibh, non aliquet libero massa non eros. Quisque ante erat, iaculis sit amet, consequat a, congue at, est.</p>
<p>Mauris ultricies ornare nibh. In eu lacus id lacus congue viverra. Duis vel elit. Suspendisse metus. In non urna at mauris dictum ornare. Etiam fermentum, ipsum tristique pretium pharetra, eros felis tempor dui, ac condimentum lorem magna a nunc. Duis scelerisque urna vitae nisi. Sed facilisis mauris tempus tellus. Etiam ac diam. Phasellus dictum laoreet nulla. Fusce aliquam, libero a gravida mollis, purus ipsum molestie risus, sed imperdiet nisl sem eget nunc. Vestibulum eget nulla in tellus mollis facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus volutpat libero. Nullam pellentesque semper urna. Vestibulum sed augue vitae elit consequat iaculis. Praesent quam ipsum, cursus eget, sollicitudin ac, aliquet vel, metus. Nulla facilisi. Maecenas sed justo et justo porttitor euismod. Vivamus mollis nibh ut neque. Pellentesque urna mauris, tempus nec, tincidunt in, suscipit et, risus. Donec mattis sem id nisl. Donec tristique, justo vitae auctor rutrum, nunc tellus cursus lacus, sit amet tincidunt nisl odio et lorem. Integer bibendum, ipsum a lobortis consectetur, diam quam volutpat dui, eget porttitor enim nisi eu nulla. Ut urna dolor, sollicitudin ut, vehicula eget, tempus quis, tellus. Curabitur eget lorem at nisl ultrices lacinia. Ut justo massa, porttitor sit amet, rhoncus et, scelerisque nec, purus. Curabitur molestie, nisl et cursus vulputate, ante lacus varius nibh, non aliquet libero massa non eros. Quisque ante erat, iaculis sit amet, consequat a, congue at, est.</p>
<p>Mauris ultricies ornare nibh. In eu lacus id lacus congue viverra. Duis vel elit. Suspendisse metus. In non urna at mauris dictum ornare. Etiam fermentum, ipsum tristique pretium pharetra, eros felis tempor dui, ac condimentum lorem magna a nunc. Duis scelerisque urna vitae nisi. Sed facilisis mauris tempus tellus. Etiam ac diam. Phasellus dictum laoreet nulla. Fusce aliquam, libero a gravida mollis, purus ipsum molestie risus, sed imperdiet nisl sem eget nunc. Vestibulum eget nulla in tellus mollis facilisis.</p>
</div>
</div>
</div>
</body>
</html>Hope that helps :thumb: