CODEWITHSUNDEEP
htmlcssscrolloverflow
Dhanapal
Dhanapal

Reputation: 380

Enable scrollbar for images inside the div

I have some text content and few images inside a div. the Div have fixed width. So, in the css I have added overflow:scroll for the div. It is enabling the scroll bar for the entire div.

But I need to enable the scroll bar only for the images. for ex:

<html>
<body>
<div class="panel">You can use the overflow property when you want to have better control of the layout. 
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
The default value is visible.You can use the overflow property when you want to have better control of the layout. 
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" >
The default value is visible.You can use the overflow property when you want to have better control of the layout. 
</div>
</body>
</html>

The above code have two images and text content. I need to enable the scroll bar for the two images and not for the entire div. how can I achieve this

Sample code:

https://jsfiddle.net/Dhanapas/qvs3ef0r/15/

Upvotes: 2

Views: 3266

Answers (3)

Pradeep Soni
Pradeep Soni

Reputation: 31

<html>
<head>
<style>
.panel {
  width: 200px;
  overflow: scroll;
}
.scroll{
    overflow-x: scroll;
}
</style>
</head>
<body>
<div class="panel">You can use the overflow property when you want to have better control of the layout. 
<div class="scroll">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>
The default value is visible.You can use the overflow property when you want to have better control of the layout.

<div class="scroll">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

</div>
The default value is visible.You can use the overflow property when you want to have better control of the layout.

</div>

</body>
</html>

Upvotes: 1

Piyush Teraiya
Piyush Teraiya

Reputation: 747

You can use this code

.googleimages {
            width: 100%;
            float: left;
        }        
        .panel {
            width: 200px;
            height: 110px;
            overflow: scroll;
        }        
        p {
            width: 100%;
            float: left;
        }
<div class="main">
        <p>You can use the overflow property when you want to have better control of the layout.</p>
        <div class="googleimages">
            <div class="panel">
                <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
            </div>
        </div>
        <p>The default value is visible.You can use the overflow property when you want to have better control of the layout.</p>
        <div class="googleimages">
            <div class="panel">
                <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
            </div>
        </div>
        <p>The default value is visible.You can use the overflow property when you want to have better control of the layout.</p>
    </div>

Upvotes: 0

33-B01
33-B01

Reputation: 2066

Here's what I propose:

<html>

<head>
    <style>
        .panel {
            width: 200px;
            overflow: hidden;
        }
        .image-container {
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="panel">You can use the overflow property when you want to have better control of the layout.
        <div class="image-container">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
        </div>
        The default value is visible.You can use the overflow property when you want to have better control of the
        layout.
        <div class="image-container">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
        </div>
        The default value is visible.You can use the overflow property when you want to have better control of the
        layout.

    </div>

</body>

</html>

Upvotes: 0

Related Questions