CSS Problem (jsFiddle Provided)

[Browny]

Hey Guys,

Ok this is really annoying me. I have provided a link, which shows the problem i have ran into.

Basically when you mouse click the "DROPDOWN" div, another div drops down. This part works fine. The issue that i have is when you scroll down this div goes with the middle content.

What i want is the middle section (place holder text) to scroll as normal, with the 'DROPDWON' div fixed so that it doesnt move. This would allow the placeholder text to scroll behind it.

http://jsfiddle.net/tebrown/fwgPJ/4/

Cheers

[Nullsig]

2 different things you need to do.

1. Your side divs (Injury Report, Mangement Options, Add Player) need to not be fixed. They should be floating divs or part of a table to maintain the layout you are looking for.

2. Your middle section with the placeholder section should have a fixed height and use the overflow:scroll in it's CSS
http://www.w3schools.com/cssref/pr_pos_overflow.asp

[Browny]

The purpose of this layout is to be able to scroll the middle section with the 2 side divs staying where they are so a user can just quickly do things. Given this, the 2 sidebars have to stay fixed. Is there any other way around it? - If i change the class (.hidden1) to fixed, then it doesnt push the content down when i press 'DROPDOWN' div.

[Nullsig]

The way I mentioned will keep them fixed. because you will scroll the center content using the scroll bar that is created when a division has overflow:scroll as an attribute/value combination.

[Browny]

Thanks for the reply.

I see what you mean, i think im going to get really confused doing this. Would your option take long to fix from the jsFiddle that was provided. This reason being is because this feature has been the hardest part and this is all i need done before i can move on and start my php.

Cheers!

[Nullsig]

Because of the amount of restructuring it takes and the clunky interface of JS fiddle, yes it would take a lot of time.

Here is the pseudo-coded skeleton

Code: Select all

<div id='wrapper' style='width:1024px'>
       <div id='navigation' style='width:100%'>
       </div>
       <div id='lowersection'>
              <div id='leftsidebar' style='float:left;width:20%;height:500px;'>
              </div>
              <div id='content' style='float:left;width:58%;overflow:scroll;height:500px;'>
              </div>
              <div id='leftsidebar' style='float:left;width:20%;height:500px;'>
              </div>
       </div>
</div>

The inline style can go to a CSS page once you get it working.

[Browny]

Ok i have made a couple of changes.

http://jsfiddle.net/tebrown/87g2X/3/

Try open the result as far as you can, in my browser (localhost) it does center now, although i cant seem to scroll now with the placeholder text?

[Nullsig]

http://jsfiddle.net/87g2X/8/

You didn't have the overflow or height attributes for #content

[Browny]

Thanks for your reply,

Is there anyway I could hide the scrollbar of the content but still do the same effect of actually scrolling? - Ideally the user would just use his middle mouse scroller to scroll the content, if you know what i mean?

CHeers

[Nullsig]

There is probably a way to do it, but it is nothing I have ever encountered.

In general you want scrolling content to look like scrolling content. Otherwise the user will be confused.

I would look into JQuery packages that can accomplish this if you are absolutely committed to it.