How to put html elements outside the screen without changing the size of the screen-CodePudding

I want to hide a div outside the screen but the screen size changes when I try.

For example:

<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px;">
    <div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
    <div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>

When I tried this code

I don't want the slider to appear.

CodePudding user response：

Using css overflow: hidden property in the body tag, you can get rid from that slider easily. I have attached the code below, run explore. However you can explore more about overflow property. Read the article I have linked below to explore clearly.

W3 School - css overflow

<!DOCTYPE html>
<html lang="en">
<head></head>
<body style="margin: 0px; overflow: hidden">
    <div style="height: 100px; width: 1000px; background-color: black; float: right;"></div>
    <div style="height: 100px; width: 1000px; background-color: gray; float: right; transform: translateX(50px);"></div>
</body>
</html>