CODEWITHSUNDEEP
htmlcss
capdragon
capdragon

Reputation: 14899

Scroll DIV which contains image, not Document

I have a large image within a div which i want to scroll. But instead of the div scrolling, i have the document scrolling.

How can i get the image to scroll within the DIV and NOT the parent or document?

My code:

<!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>
    <title>Force Scroll</title>
    <style type="text/css">
        .scrollable 
        {
            overflow: auto;
        }
    </style>
</head>
<body>

<div class="scrollable">
    <img src="image.jpg" alt="test image" />
</div>

</body>
</html>

Upvotes: 3

Views: 30340

Answers (3)

Jared
Jared

Reputation: 12524

You need to define a width and height. Divs are block elements and will take up as much space as needed. In this case as large as the image is.

Upvotes: 2

korywka
korywka

Reputation: 7653

you need to fix size of div, for example:

width: 200px;
height: 200px;

Upvotes: 1

user142019
user142019

Reputation:

Set a (max) width and height for the div and it should work. Otherwise the div will just adjust itself to the size of the image:

#mydiv {
  overflow: auto;

  max-width: 800px;  // or width instead of max-width
  max-height: 600px; // or height instead of max-height
}

Example here: http://jsfiddle.net/x58RD/.

If it happens that you are forced to support ancient browsers like IE6, you need to use width and height instead of max-width and max-height anyways or it still won't work.

Upvotes: 13

Related Questions