Tabs in product details float and do not scroll...

Hello,

I am trying to slightly modify the layout template.
I would like to add a scroll bar in the middle section(Products) and i have the user scroll that instead of the whole page. i.e the header and both left and right columns will stay static.

I have created a new Div like so...
#contentContainer{
float: left;
width: 610px;
height:540px;
margin-bottom: 0px;
padding-top: 3px;
margin-left: 0px;
margin-top: 0px;
background: rgb(39,39,39);
overflow-y:scroll;
overflow-x:hidden;
text-align:center;
}

and in my layout.tpl, i have wrapped the Content div like so...

<div id="contentContainer">
<div id="content"><?php echo $content; ?></div>
</div>

The scroll bar does appear just fine, however, the 4 tabs(Description, Additional Images, etc...) do not scroll with the rest of the content and "Float" over the information displayed.

Please help.

Thanks...

Certainly a link would be needed to know what you are talking about.

Thanks for the quick reply...

I do not have it on a server but on my machine local(Easyphp).
It will be on a server once I am done with the changes...

I will try to make it more clear without repeating myself.

I have added a Div to wrap the whole middle content of the cart.
I have made the whole site fixed size as a rectangle.

When the middle content expands either to display products or details of a specific product
a vertical scroll bar appears to allow the user to scroll down. All that only inside the middle content area,
so the header, and both left and right columns(where categories, currency etc..are) this does not move.

Essentially, the Red menu is always visible along with the rest of the site(Left, right columns).


Now it works fine but when i am viewing the details of a specific product, the 4 tabs(Description, additional images, etc...) do not scroll a stay on top. So i would have the additional images under the tab bar.
It may be a problem with the z-index? When i say on top i do not mean on top of the content area i mean as a floating layer.

Thanks...

P.S. I am going crazy with this... i have reinstalled everything on my local server to make sure i started with
a clean state. I have only changed the style sheet and wrapped the middle content in my new div as shown on my first post. Everything else is as new as downloaded. You can easily reproduce the problem. by simply changing the style sheet and layout.tpl.

Here is what i have negleted to show on my first post...

/* layout */
#container {
width: 990px;
height:540px; <=====
margin-left: auto;
margin-right: auto;
text-align: left;
background: #FFFFFF;
border: 7px solid rgb(114,168,194);
margin-top: 30px;
margin-bottom: 30px;
oveflow:hidden; <=====
}

Sorry,

I have also done this..

body {
margin: 0px;
padding: 0px;
text-align: center;
overflow:hidden; <=====================
background-color: rgb(19,19,19);

Ok, I think it is fixed...Although i do not quite understand why...lolol

Since I made my container wider, and the middle content wider by wraping it in a Div(so i can have a scrollbar and not have the middle expand in length, therefore expanding the whole web site), it seem to have caused the problem.

I changed the .Tab width from 100% to a fixed width (590px 20px less than the middle content width).

The tabs, now follow along when scrolling where as before they used to get detached and stay a float on top of the content.
Actually, only the links "tab a " use to "float" or not move, the tab bar itself used to scroll correctly...

Anyways weird...

Thanks..