Div overflow

[Aaron Robinson]

This is my first time on these forums, so you will have to excuse any stupidities I bring with me. First, I am not trying to have anyone do my homework! I have been working on a layout for some time and was never able to fix this issue. I am not very big into web design so I am hoping there is a simple fix in CSS.

http://linus.highpoint.edu/~arobinson/ - The content here is really rough because I am not cleaning it up till I fix this issue.

The issue is that when I scroll using the main scroll, I am scrolling a div in the middle. The divs are as follows: Wrap which has a fix width, 100% height and centered. In the Wrap we have top, middle, bottom divs. In side middle there is one more div called content which middle just "Frames". When I scroll content, I want it to only scrolling in the content/middle div. In other words, if it overflows into the top or bottom divs the overflow is hidden. However, I want the content scrollable but only within the div.

As a note, I am aware that I have a second issue which requires that I do the height of middle with dynamicly with JS. This is because the wrap has 3 sections. Top and bottom have fixed pixel heights and I need to calculate the height of middle using JS instead of just giving a % of height.

Thank you ahead of time for any help and I look forward to any questions or additional info I can provide.

Aaron

[whiteyoh]

Without seeing the code i would suggest that you take a look into something called fluid and static layouts.

[Aaron Robinson]

Without seeing the code i would suggest that you take a look into something called fluid and static layouts.

After doing a brief look at this material, I haven't found any solution to the problem. Fluid and static layouts returns a lot of fun stuff for doing blogs where there is a top div, a sidebar/navigation and a bottom but I am not seeing these divs hold the same place. When I resize my sight, the bottom and top divs stay in their positions (fixed). The content div is relative and that is where my scrolling data will go. It appears to me that fluid and static layouts are meant to address browsers at different resolutions. I am not trying for this flexibility. My site assumes you at least have 800px width and if the window goes below that, unexpected behavior ensues. I might consider readdressing this later but currently I just want that content to stay in the div I made for it!

my css:
http://linus.highpoint.edu/~arobinson/css/main.css

I can provide whatever code you want but you can snag it off of the website provided easily enough too.

Aaron

[whiteyoh]

From looking at your page source your "under destruction" lines and the image called on the line above the first text is not wrapped in any css tags.

For your code to adopt the style you need to use div tags.

<div id="body"> Some code </div>

Without those tags it wont do anything

[Aaron Robinson]

From looking at your page source your "under destruction" lines and the image called on the line above the first text is not wrapped in any css tags.

For your code to adopt the style you need to use div tags.

<div id="body"> Some code </div>

Without those tags it wont do anything

I could be mistaken but I am encapsulating the data there in the right div called "content":

<div id="content">
<!-- BEGIN CONTENT DIV: this section changes via switch -->
<div id="rotator"> 
   <layer id="HTMLRotator"></layer>
</div>

<img id="rImage" src="img/mandelbrot/01.png">
hey... my name is Aaron Robinson.  And my website is currently under
destruction.
<br /><br /> 

...

hey... my name is Aaron Robinson.  And my website is currently under
destruction.
<br /><br />  
<!-- END CONTENT DIV -->
         </div>

         <div id="bottom">
         </div>

the reason this looks so nasty is I am using some php to do a switch case. The php files are broken up into header, footer and then content. The content is switched via php case structure. Now if I am making some silly div open/close issue, that would be awesome. I think I need some more properities in my CSS though to get the behavior I am looking for.

Just to restate the issue, I want a specific div in my page to scroll via the main bar. When it is scrolled data only shows up in that div and does not overflow into any other divs. Thus far I have found no detailed solution to this problem.

[whiteyoh]

Yes i get what you need.

First thing id try and do is get your divs nested correctly and get your body and other tags used. Your switch statement is just a simple script at the top of the page.

At present your only using 1 div tag, so in essence its not really "overflowing" as its not nested inside of anything

[Aaron Robinson]

Yes i get what you need.

First thing id try and do is get your divs nested correctly and get your body and other tags used. Your switch statement is just a simple script at the top of the page.

At present your only using 1 div tag, so in essence its not really "overflowing" as its not nested inside of anything

I am open for advice on fixing the issue but if I take my content in the wrap out, it will no longer center aligns. I tried to do text-align:center on body and this was not working on my top, middle and bottom divs. This is why I used the wrap in the first place. As for nothing in the bottom and top divs, I do intend to put none scrollable fixed content there. The reasons for the divs is to provide a background for that area and of course the functionality that I am trying for.

[Aaron Robinson]

I am throwing in the towel on this. I looked at clipping, margins, padding, overflow, z-index and found nothing to help the solution. I need all my divs because i am using them to make parts of the "floating" frame in the middle. Since I have a background image that I am scaling and centering, I cannot make static background imgs with a high z-index to force the scrolling text to go "under them".

Since I am throwing in the towel, the url will no longer be the website in question.