CODEWITHSUNDEEP
htmlcss
user1995781
user1995781

Reputation: 19453

CSS fixed div top to parent div

I want to have the div to always fix floating top appear within a div and my code looks something like this:

HTML:

<p>Some on page content</p>
<div id="cover">
    <div id="floatdiv">floating fix top bar</div>
    <p>first contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p>
</div>
<p>Other content ..</p>

CSS:

#cover{
    border: 1px solid red;
    width: 500px;
    height: 300px;
    overflow: auto;
}
#floatdiv{
    background-color:black;
    color:white;
    padding:10px;
}

http://jsfiddle.net/csLd6j7n/

How can it be done?

Upvotes: 2

Views: 112

Answers (6)

Sandeep Ojha
Sandeep Ojha

Reputation: 1

HTML page:

<p>some content page</p>
   <div class="outerCovering">
 <div id="cover">
  <div id="floatdiv">floating fix top bar</div>
  <div><p>first contents</p> <p>second contents</p> <p>third contents</p></div>               
 </div>
 </div>

css page:

 #cover{
 border: 1px solid red;
 width: 500px;
 height: 300px;
 overflow: auto;

 #floatdiv{
 background-color:black;
 color:white;
 padding-top:10px;
 padding-bottom:10px;
 position: absolute;`enter code here`
 width: inherit; 
 }
  `

Upvotes: 0

Dyrandz Famador
Dyrandz Famador

Reputation: 4525

you can use position: absolute to remain the div. Then use width: inherit to get the parent's width, also specify the padding to top and bottom to avoid the overflowing of div

#floatdiv{
     background-color:black;
     color:white;
     padding-top:10px;
     padding-bottom:10px;
     position: absolute;
     width: inherit; 
}

JSFIDDLE DEMO

UPDATE:

added <p>&nbsp;</p> to display the first value

JSFIDDLE DEMO

Upvotes: 3

devendrant
devendrant

Reputation: 451

I have done it with following html and css, Hope it helps.

HTML 

     <p>Some on page content</p>
      <div id="cover" class="cover">
        <div id="floatdiv">floating fix top bar</div>
        <div class="scrollableContent">
          <p>first contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p>
        </div>
     </div>
    <p>Other content ..</p>

CSS

#cover{
    border: 1px solid red;
    width: 500px;
    height: 300px;
    overflow: hidden;
    position:relative;
}
#floatdiv{
    overflow:hidden;
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    background-color:black;
    color:white;
    padding:10px;
}
.scrollableContent{
     height: 250px;
    margin-top:30px;
    overflow-y:scroll;
}

JS Fiddle Working with first option visible

Upvotes: 4

Sai Deepak
Sai Deepak

Reputation: 688

A little Bit Modified Your existing Code

<p>Some on page content</p>
<div class="outerCovering">
<div id="cover">
    <div id="floatdiv">floating fix top bar</div>
    <div><p>first contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p> <p>contents</p></div>
</div>
</div>

Here is your Css code

#cover{
    border: 1px solid red;
    width: 500px;
    height: 300px;
    overflow: auto;
}
#floatdiv{
    background-color:black;
    color:white;
    padding:10px;
    position: absolute;
    top: 0px;
    width: 100%;
}

Reference Fiddle

Upvotes: 0

Derek Story
Derek Story

Reputation: 9593

If I understand your question, you can give it a position: absolute and width: 100% :

JS Fiddle 

#floatdiv {
    background-color:black;
    color:white;
    padding:10px;
    position: absolute;
    width: 100%;
}

Upvotes: 1

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

If you don't set left/top properties, it will be fixed/absolute against the closest relative/absolute parent div.

#floatdiv {
    background-color:black;
    color:white;
    padding:10px;
    //I would go with absolute
    position: absolute;
    width: 465px;
    display: block;
}

If you use fixed instead absolute, when you scroll the page, the fixed div will be also visible. Also, add padding-top: 45px to #cover or the first paragraph will be hidden behind #floatdiv

Upvotes: 1

Related Questions