Search code examples
javascripthtmlcsspositioningfixed

Is it possible to make a child div static while keeping the parent fixed?


I have a column that is aligned on the right hand side of the page. The column must span the entire height of the page, thus my reasoning behind making it fixed. There will be items within the column that should not be fixed. No matter what I play with the items continue the scroll with the page.

Does anyone have a way to either make the child div static within the parent that is fixed, or a way to make a column span the entire height of the page without using a fixed positioning?

Here is the CSS:

.rightCol{
   width: 28px; 
   position: fixed; 
   bottom: 0px; 
   top: 0px; 
   z-index: -1; 
   margin-left: 969px;
}
.rightColItem{
   margin-top: 95px;
   margin-left: 10px;
   position: absolute;
}​

And the HTML:

<div class="rightCol">
   <div class="rightColItem">
      I want this to be static and not fixed
   </div>
</div>

And here is a link to a fiddle --> http://jsfiddle.net/7hmKy/

Any help is greatly appreciated!

Edit 1: The right aligned bar is inside a container div of 1000px.


Solution

  • An easier method—with less markup too—is to use CSS3 gradients for the background of your page. You can also easily use an image fallback to support old browsers:

    body {
      width: 100%;
      height: 100%;
      background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(100%, #fa8072), color-stop(100%, transparent));
      background: -webkit-linear-gradient(right, #fa8072 200px, transparent 200px);
      background: -moz-linear-gradient(right, #fa8072 200px, transparent 200px);
      background: -o-linear-gradient(right, #fa8072 200px, transparent 200px);
      background: linear-gradient(right, #fa8072 200px, transparent 200px);
    }
    
    .sidebar {
      width: 200px;
      float: right;
    }
    

    Demo (I used Sass and Compass because they make CSS3 gradients much easier to keep updated.)

    EDIT:

    Based on your comment, I've created a new example using a centered body that is 1000px wide (with some finagling you could use a div) and changed the gradients to replicate a border:

    body {
      height: 100%;
      min-height: 2000px;
      width: 1000px;
      margin: 0 auto;
      background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(98.33333%, transparent), color-stop(98.33333%, #000000), color-stop(100%, transparent)), -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, #000000), color-stop(83.33333%, #000000), color-stop(100%, transparent));
      background: -webkit-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -webkit-linear-gradient(right, #000000, #000000 10px, transparent 12px);
      background: -moz-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -moz-linear-gradient(right, #000000, #000000 10px, transparent 12px);
      background: -o-linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), -o-linear-gradient(right, #000000, #000000 10px, transparent 12px);
      background: linear-gradient(right, transparent 295px, #000000 295px, transparent 300px), linear-gradient(right, #000000, #000000 10px, transparent 12px);
    }
    

    Demo