Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <p>
    Below you see a simple scrolling container. I would like to position another element covering #contents (the width of which is deterined by its contents) completely but within the scrolling area. You can add or modify the html or css but not use javascript. The end result should be that #cover is positioned over #contents (and be the same length) without being a parent element.
  </p>
  
  <div id="container">
    <div id="scrolling-container">
        <div id="cover"></div>
        <p id="contents">
<!-- start slipsum code -->
​
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
​
Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.
​
<!-- please do not remove this line -->
​
<a href="http://slipsum.com">lorem ipsum</a>
​
<!-- end slipsum code -->
​
          
        </p>
    </div>
  </div>  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
togakangaroopro
0viewers