• Locked
1 reply [Last post]
Sun, 2011-03-06 14:18
bronzino1
bronzino1's picture
Offline
Regular
Last seen: 11 years 6 weeks ago
Timezone: GMT-6
Joined: 2010-03-07
Posts: 29
Points: 42

I have many iterations of this page, but none of them are working the way I would like.

http://www.elizabethlarose.com/beneficial/classlist.php

Basically I want a vertical scroll to appear when the content goes beyond 100% of the screen height - the most ordinary of browser behaviors. I have tried setting "overflow: auto" for the body area, and it does not work. I have tried setting and unsetting heights for every element, and that does not work. I can get it to work with individual elements like divs, but not for the entire page/body.

It's a problem in both Firefox and Safari. Any help would be appreciated. I found one thread similar to mine suggesting setting fixed heights (versus %s) but that's not working here.

Here's the relevant CSS:

.img_wrap
{
height: 100%;
top: 0px;
width: 135px;
position: fixed;
background-color: #9A5044;
}
 
#img_title
{
height: 100%;
top: 0px;
min-width: 125px;
position: absolute;
background-color: #9A5044;
}
 
#div_nav
{
height: 100%;
left: 135px;
min-width: 125px;
top: 0px;
position: absolute;
}
 
#div_narrow
{
	left: 285px;
	top: 25px;
	position: fixed;
/*	overflow: auto;*/
	height: 100%;
	}	
 
.text
{
	color: black;
	background: #E6E6E6;
	font-size: 100%;
	padding: 20px;
	border: 1px solid #666;
	}
 
body
{
margin: 0;
padding: 0;
border: 0;
overflow: auto;
/*overflow: hidden; */
/*height: 100%; */
/*max-height: 100%; */
background-color: #A3BFD9;
color: white;
font-family: Verdana, Geneva, sans-serif;
}

Top
Tags:
Sun, 2011-03-06 22:36
#1
bronzino1
bronzino1's picture
Offline
Regular
Last seen: 11 years 6 weeks ago
Timezone: GMT-6
Joined: 2010-03-07
Posts: 29
Points: 42

I've isolated the problem.

I've isolated the problem. It's this line:

#div_narrow
{
	position: fixed;
	}

I can change or delete it, but then my page layout changes entirely. I want to go like this:

<---img_wrap---> <--div_nav--> <--div_narrow-->

When I remove that line, I get:

<---img_wrap---> <--div_nav-->
< blank area > <--div_narrow-->

Top
  • Locked