First I added temporary background-colors to divs and found that #head is extending under the left logo:-
#head { background-color: blue;
width:800px;
margin: 0 auto;
}
#hlinks { background-color: skyblue;
position:relative;
bottom:20px;
font-size:9pt;
color:#FFFFFF;
text-align:right;
width: 610px;
float: right
}
div.scroller {
/* modify width and height of scrolling section if
necessary */
font-size:11px;
width:800px;
height:500px;
top:138px;
overflow:hidden;
margin: 0 auto;
z-index: 1; background-color: green;
}
So I added a height of 118px to #head
#head { height: 118px;
width:800px;
margin: 0 auto;
}
which stopped it going under the logo.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.