CODEWITHSUNDEEP
htmlcss
user3076482
user3076482

Reputation:

Fixed header and fixed right scrollbar

I'm working on the script header fixed and fixed right scrollbar that I would like to use, just like Facebook. But I want the right side div to not be fixed. I'm fixed position. div shifting to the left this time.

I want it to be fixed to the right of the black div.Header, which has height: 40px;

This is Demo in JSfiddle

This is my HTML CODE:

<div class="globalHeader"><div class="globalHader-in"></div></div>
<div class="global_container"><div class="container">
    <div class="ksmsl"></div>
    <div class="ksmort"></div>
    <div class="ksmsg"></div>


</div></div>

and also CSS code :

body{
   margin:0px;
    padding:0px;

}
.globalHeader {
    width:100%;
    height:40px;
    position:fixed;
    background-color:#2a3542;
    z-index:99999;
    }
.globalheader-in {
    width:981px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    }
.global_container{
    clear:both;
    width:981px;
    height: 100000px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    position:relative;
    top:40px;
    background-color:#f8f8f8;
    }
.container{
    float:left;
    width:981px;
    height:auto;

    }
.ksmsl{
    float:left;
    width:220px;
    height:auto;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;

    }
.ksmsg{
    float:right;
    width:199px;
    height:1000px;

    background-color:#000;
    }
.ksmort{
    float:left;
    width:560px;
    height:auto;
    border-left:1px solid #d8dbdf;
    border-right:1px solid #d8dbdf;
    border-bottom:1px solid #d8dbdf;
    }

Upvotes: 0

Views: 184

Answers (1)

Derek Story
Derek Story

Reputation: 9593

Fix your sidebar and instead of floating it right, you say right: 0; JS Fiddle

.ksmsg{
    margin-top: 40px;
    position: fixed;
    right: 0;
    width:199px;
    height:1000px;
    color: #fff;
    background-color:#000;
    }

As for keeping the fixed sidebar within the container, you cannot contain a fixed div. Please refer to: Fixed position div not staying contained in wrapping div, overlays entire screen?

Upvotes: 1

Related Questions