CODEWITHSUNDEEP
htmlcss
DWTBC
DWTBC

Reputation: 285

CSS - header to stay in top of container

I have this container which can scroll the content. I would like the header in this container to always stay in the top.

http://jsfiddle.net/z9ze5/

Container:

.lists {
    width: 300px;
    height: 250px;  
    margin: 30px auto;
    background: #39C;
    overflow: scroll;
    position: relative;
}

Header:

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: absolute;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

Upvotes: 0

Views: 5569

Answers (4)

Marc Audet
Marc Audet

Reputation: 46825

If you are willing to alter your mark-up, here is one way of doing it: 

<div class="lists">
    <header class="box_header">
        <h1>HEADER 2</h1>
        <div class="setting" id="btn2"></div>
    </header>
    <section class="content">
        <p>Lorem Ipsum ....</p>
    </section>
</div>

Wrap your scroll area in a <section> (or other block level element).

For your CSS:

.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}

Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/

More Advanced Example

If you study the following example:

http://jsfiddle.net/audetwebdesign/fBNTP/

uou can see how your scrolling boxes could be applied in a semi-flexible layout. I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.

The height is trickier to adjust. I fixed the height of the parent container, see the following rule: 

.contentWrapper {
    border: 1px solid red;
    margin-top: 1.00em;
    padding: 30px 0;
    overflow: auto;
    height: 400px;
}

If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.

Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.

Upvotes: 2

wunth
wunth

Reputation: 634

look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.

Upvotes: 0

Jeff Shaver
Jeff Shaver

Reputation: 3355

If you want a non-css fix, add this listener...

$('.lists').scroll(function() {
    $('.box_header', this).css('top', $(this).scrollTop()+'px');
});

and then change .lists css to give relative positioning

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: relative;
    margin: 0;
    background: #DDD;
    z-index: 999;
}

Upvotes: 2

AE Grey
AE Grey

Reputation: 368

Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.

Upvotes: 0

Related Questions