CODEWITHSUNDEEP
css
void
void

Reputation: 36703

Two Overlapping divisions, but upper one is unscrollable

I have two divisions in my html page with their respective css

<html>
<head>
#lowerone
{position:absolute; bottom:25px; right:25px; height:300px; width:300px;}
#upperone
{position:absolute; bottom:25px; right:25px; height:300px; width:300px; overflow:scroll;}
</head>
<body>
<div id="lowerone">
</div>
<div id="upperone">
<img src="/bg.3.jpg" />
</div>
</body>
</html>

But the upper div i.e. the UPPERONE is unscrollabe.. How to make it scrollable?

Upvotes: 0

Views: 144

Answers (2)

Hitesh
Hitesh

Reputation: 4288

Check below code both scroll works , 

<html>
<head>
    <style>
#lowerone
{position:absolute; bottom:25px; right:25px; height:250px; width:300px;overflow:scroll;}
#upperone
{position:absolute; bottom:25px; left:25px; height:250px; width:300px; overflow:scroll;}
    </style>
</head>
<body>
<div id="lowerone">
    <img src="http://media.caranddriver.com/images/12q4/477956/2014-gmc-sierra-1500-photos-and-info-news-car-and-driver-photo-492039-s-450x274-1.jpg" />
</div>
<div id="upperone">
<img src="http://media.caranddriver.com/images/12q4/477956/2014-gmc-sierra-1500-photos-and-info-news-car-and-driver-photo-492039-s-450x274-1.jpg" />
</div>
</body>
</html>

Here is my FIDDLE

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157304

Any specific reason of using 2 absolute positioned div overlapped on one another? and more over <style> tags are missing...And scroll works for me..

Demo

Upvotes: 1

Related Questions