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

Questions

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

December 30, 2022

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.

>Solution :

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>