• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 257
  • Last Modified:

Sidebar shadow (all the way down)

Hey,

On this page: http://goo.gl/ce4qX - I am using a sidebar shadow for my main content but for some reason it extends though my bottom content in the blue boxes and the logos.

I keep checking tags, but I keep going in circles. Any ideas how I can make that content stay within the parent div?

Ryan
0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 4
  • 4
  • 3
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
It si doing what you told it to.  Try changing your 'z-index' on #sidebar from 9999 to 1 and see what happens.
0
 
catonthecouchproductionsAuthor Commented:
Ok, thanks. I added that and I still see it through the other boxes on the bottom. I know that I said absolute and height 100%, but thought the position relative on its parent container would constrain it. I would like the sidebar shadow to keep inside of: #top_sub_content

Any thoughts?

Thank you.

Ryan
0
 
user_nCommented:
try to change  min-height: 350px; to height: 440px;

#sidebar {
background: url("../images/sidebar_shadow.png") repeat-y scroll 240px top transparent;
height: 100%;
left: 0;
min-height: 350px;
position: absolute;
top: 0;
width: 279px;
z-index: 1;
}

#sidebar {
background: url("../images/sidebar_shadow.png") repeat-y scroll 240px top transparent;
height: 100%;
left: 0;
height: 440px;
position: absolute;
top: 0;
width: 279px;
z-index: 9999;
}
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
catonthecouchproductionsAuthor Commented:
The content will not stay a unique height. I use that template across various pages each have different heights.

Ryan
0
 
Dave BaldwinFixer of ProblemsCommented:
Try putting <br clear="all" /> right after the closing </div> for #page_content.
0
 
catonthecouchproductionsAuthor Commented:
Just added that, still seems like its dropping down.

Ryan
0
 
Dave BaldwinFixer of ProblemsCommented:
Look at your http://skimaine.kgconnect.com/ski-areas/ page.  Looks like you have it right on that page.
0
 
user_nCommented:
You can try it to take it from div page content and set it in sidebar
0
 
user_nCommented:
with javascript
0
 
user_nCommented:
You can try to take the hight from div #page contenet and set ti in div disedebar with javascript
0
 
catonthecouchproductionsAuthor Commented:
took another look back as you said and tweaked my code a bit as well and seems to be working.
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now