troubleshooting Question

Scroll bar styling with CSS

Avatar of Alan Varga
Alan VargaFlag for United States of America asked on
7 Comments1 Solution527 ViewsLast Modified:
I would like to reformat a web page but am having trouble with CSS overflow and sizing for different screen resolutions.  I've learned from what I've already read that absolute pixel heights are generally not a good idea, except for maybe the header.  I've tried percentage and em units, and I'm close, but I can't seem to quite get there.  Here is my basic page layout:

fixed vertical navigation | scrolling content

Multipe resolutions or window resizing seem to be big problems from what I've seen so far.  Can I use pure CSS, or will I have to resort to some Javascript?  One solution suggested using JS to determine the page width and height, then conditionally use different stylesheets.  I was hoping CSS was flexible enough to handle this by itself.

The trouble I'm having is with overflow and scroll bars.  In my current HTML page at 1280 x 960 I have a scroll bar along the right side of the navigation div, but no handle to use it.  In the article div, the scroll bar lets me scroll all the way down to halfway through the last line.

If I switch to 1024 x 800, I still don't have the handle in the navigation div, but now I really need it.  Scrolling down the article div, I don't see the bottom limit of the scroll bar, although I can keep scrolling past the bottom of the browser window onto the task bar.

I think the structure I need to use is:
body (to set the page width at 100%, unless that should be in a dedicated div/container (id=page)
div for the header
div for the navigation
div for the article

Ideally I would like to include divs for content and footer inside the article, but that was initially too complicated.

I should also mention that it looks fine in Firefox, Chrome and IE9, but I will need to make allowances for IE8.  Here is a portion of my stylesheet.  Can anyone suggest what I need to change?  Thanks in advance.

The link to the beta page is at:

/* ------------------------------
------------------------------ */

body {
	font-family: "Times New Roman", serif;
	font-size: 1.05em;  /* originally 13pt */
	width: 100%;
/*	background: url('parchm.jpg') repeat; */
//	background: url('stone.jpg') repeat;

/*===== # (div) =====*/
#page {

#pageheader {
	position: fixed;
	left: 0;
	width: 100%;
	top: 0;
	height: 125px;  /* originally 23% */
	color: Brown;
	font-size: 2.00em;
	font-weight: bold;
	text-align: center;
//	background-color: LightCyan;

#navigation {
	position: fixed;
	left: 0;
	width: 200px;  /* originally 20% */
	top: 126px;  /* originally 24% */
	height: 700px;  /* good for 1280 x 960, originally 77% */
//	height: 77%;
	overflow: scroll;
//	background-color: LightYellow;
	font-family: "CourierNew", monospace;
	font-size: 0.75em;

#navigation a {
	display: block;

#navigation ul {
	list-style-type: circle;
	margin: 1em 1em 0 -1em;

#article {
	position: fixed;
	left: 201px;  /* originally 21% */
/*	width: 79%; */
	top: 126px;  /* originally 24% */
//	top: 15%;
	height: 700px;  /* good for 1280 x 960, originally 77% */
	overflow: scroll;
//	background-color: Linen;

#content {
	position: fixed;
	left: 21%;
	width: 79%;
	top: 23%;
//	height: 70%;
	overflow: auto;
//	background-color: Linen;

#pagefooter {
	font-family: Arial, "Sans Serif";
	font-size: 0.70em;
//	background-color: LightCyan;
Join our community to see this answer!
Unlock 1 Answer and 7 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros