CODEWITHSUNDEEP
css
Slit
Slit

Reputation: 501

Can' t scroll on my web page

I am beginner in HTML/CSS and I come to one issue that is strange to me. Can't remember that I had this problem when started to learn. Nevertheless, the problem is that I can't scroll when I resize my browser window. Her is the code:

<!DOCTYPE html>
<html>
<head>
<body>
<img id="pic" src="http://0.tqn.com/f/lg/a154.png"/>
<style>
#pic {
position: fixed;
left: 1060px;
top: 150px;
right: 300px;
bottom: 658px;
}
</style>
</body>
</head>
</html>

I put position of picture on left and right because that is the only way that I know to fix image on one specific position. I tried auto, but the picture moves when I resize browser. Thank you for your time and effort

Upvotes: 1

Views: 6232

Answers (1)

laymanje
laymanje

Reputation: 833

Ok, the issue I think you have is that when you position an element absolute, it removes it from the flow of the document.

So think of it as if the absolute element is removed from the body of the page.

The body of a page is always 100% width of the browser. Your image is being positioned outside of the browsers view port.

you have two options. either do not user absolute positioning and use a css layout to get it the image in the proper place.

or you can set the width of the browser to the width that you need it to be e.g. 1200px

the first option is better for modern days and doing more future facing sites.

Upvotes: 1

Related Questions