Home/ Questions/Q 8410013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:04:19+00:00

Ok, so I want the left side div to have scrolable content, i tried

  • 0

Ok, so I want the left side div to have scrolable content, i tried overflow: hidden and auto yet they don’t quite do the trick. There is still a scroll-bar showing.

Here is the JSFiddle with HTML and CSS: http://jsfiddle.net/yukimura/Sgq4j/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can wrap it inside a second div, which is narrower by the scrollbar size and set that div’s overflow to hidden.

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>

<div id="wrapper">
<div id="scrollWrap">            
     <div id="pageleft">
          <div id="leftheader"></div>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>
          <a href="javascript:;">
              <img src="http://i.imgur.com/4rwe1s.jpg" width="46" height="46" alt="*" style="margin:10px 10px;"/>
          </a>

     </div>
    </div>
</div>


</body>
</html>
​

    CSS

    #wrapper { width:980px;margin:0px auto; }
#scrollWrap { width:220px; height:500px; overflow:hidden; }
#pageleft { float:left;margin:10px 10px;width:228px;height:500px;border:1px solid #313131;overflow:scroll; }

#pageleft > #leftheader { width:228px;height:48px;background-image:url(http://i48.tinypic.com/2ecnjx2.png);border-bottom:1px solid #313131;display:block;position:absolute; }

#pageleft a { width:220px;height:66px;display:block;border-bottom:1px solid #313131;transition: all 400ms linear; }

#pageleft a:hover { background-color:#5ca0d1; }​

    http://jsfiddle.net/Sgq4j/3/

    Referred to this solution: Remove HTML scrollbars but allow mousewheel scrolling

    • 0