CODEWITHSUNDEEP
cssscrollcss-position
Sir Cumference
Sir Cumference

Reputation: 214

Fixed div inside scrolling static div

I have an element container, which must remain static. Inside it lies fix, which I need to be fixed when container overflows and I scroll in it.

Example:

<div id="container" style="width: 850px; height: 200px; position: static;">
    <div id="fix"></div>
    <div id="otherStuff" style="width: 2000px;"></div>
</div>

Can I do this with CSS?

Upvotes: 0

Views: 546

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

You can put the content you want to overflow in an element with overflow-x: scroll, and the #fix element will stay where it is.

.overflow {
  overflow-x: scroll;
}
<div id="container" style="width: 850px; height: 200px; position: static;">
  <div id="fix">fix</div>
  <div class="overflow">
    <div id="otherStuff" style="width: 2000px;">otherstuff</div>
  </div>
</div>

Upvotes: 1

Related Questions