HTML CSS examples for CSS Widget:Header
Make Header stay while content scroll inside the container
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #my{<!--from w w w. ja v a2s . co m--> overflow:scroll; height: 100px; } .profilePopup{ border: 1px solid black; background: #f8f8f8; z-index: 999; width: 400px; height: 200px; } .title_background{ background: rgba(0,0,0,0.75); margin-bottom: 15px; padding:10px; position: relative; } .myEventsIcon{ padding:10px; display: inline-block; } .eventDetails { text-align: center; } .eventDetails h5 span{ color:#ff1a00; display: block; } .eventDetails a{ width:150px; } </style> </head> <body> <div id="my_events" class="profilePopup"> <div class="title_background"> <h3>My Events</h3> </div> <div id="my"> <div class="myEventsIcon"> <div class="eventDetails"> <a href=""> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" width="70px"> <h5> <span>12-02-2014</span> </h5> <h5>event</h5> </a> </div> </div> <div class="myEventsIcon"> <div class="eventDetails"> <a href=""> <img src="https://www.java2s.com/style/demo/Google-Chrome.png" width="70px"> <h5> <span>12-02-2014</span> </h5> <h5>event</h5> </a> </div> </div> <div class="myEventsIcon"> <div class="eventDetails"> <a href=""> <img src="https://www.java2s.com/style/demo/Firefox.png" width="70px"> <h5> <span>12-02-2014</span> </h5> <h5>event</h5> </a> </div> </div> <div class="myEventsIcon"> <div class="eventDetails"> <a href=""> <img src="https://www.java2s.com/style/demo/Firefox.png" width="70px"> <h5> <span>12-02-2014</span> </h5> <h5>event</h5> </a> </div> </div> <div class="myEventsIcon"> <div class="eventDetails"> <a href=""> <img src="https://www.java2s.com/style/demo/Opera.png" width="70px"> <h5> <span>12-02-2014</span> </h5> <h5>event</h5> </a> </div> </div> </div> </div> </body> </html>