How to overflow center section

Get Started
1

On the site I have control over (and did much of the design), I have a page for pictures. Now when I click the different picture sub pages that actually display the pictures (actually one page with multiple inputs to control what is displayed) I want the picture section to not got on forever. I would like the viewer to be able to scroll down through the pictures but have the rest of the page stay where it is - particularly the left menu area.

Now I know frames (and hate them) and have looked at iFrames but don’t understand the iFrame at all.

How can I get the center picture area to be displayed, say, full width of the section size (and that is determined by the browser) and 100% of the browser open size? Make sense? Probably not.

Here is the url for the page in question: [http://www.saccc567.com/ShowPictures.php?myear=2011&mplace=Millwood Park&mdate=June 11&mshow=SACCC](http://www.saccc567.com/ShowPictures.php?myear=2011&mplace=Millwood Park&mdate=June 11&mshow=SACCC)

Thanks

2

I don’t think I understand your question. Do you want a modal that will open a series of images which can scroll down so they can see a series rather than one at a time?

Or are you looking for an alternative to the modal window?

3

OK, what I want:

I need the header, the logo in the upper left and the navigation (menu) area locked to the position they are when the page first opens.
Then The pictures can slide up under the header but not left/right. I hope that makes more sense.

4

Ok, so it sound like you want a fixed position navigation right? You can do that by adding “position:fixed” to #leftcol.

5

Wow, There is a lot of code to be fixed there. As SDT suggested, you am wish to give whatever element contains your logo position:fixed; and use top/ left: to place it pixel perfect within your design. This will take that content out of the normal flow, so you will need to pad the following element ( or it will end up appearing UNDER your logo area). It’s gonna take a lil finesse. The logo will stick around even if you scroll down ( which means it will go over the navigation too… unless you use position: fixed on that as well… see how starting from your current idea this could get complicated??)

A slightly UGLIER but easier solution is to give the element that contain your pictures an ID, lets say <div id=“gallery”>… your photos here…</div> Decide on a height ( let say each photo is 100px high ( including margin) and you would like 5 rows of photos visible at any time… so :
#gallery{height:500px; and overflow-y:scroll;}

This will create a window within your window, in which you can scroll through your pictures. Not exactly beautiful but quick and functional.

Hope this helps.