I have a box titled "Sections" on a web page I am creating. The box appears normally when my window is full screen (see first image).
However, when I make the window smaller, my box drifts off of the screen (see second image).
I want to make my site so that when I size my window down, the box still fully appears on the screen. My code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="good, website, super">
<meta name="description" content="This is a super good website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="apple.jpg">
<link rel="stylesheet" href="samplestyles.css">
<title>Super Good Website!</title>
</head>
<body>
<h1 id="top">Welcome!</h1>
<br>
<nav>
<a href="https://www.w3schools.com/html/default.asp" target="_blank">W3 Schools Website</a> 
<a href="https://www.coolmathgames.com/" target="_blank">Cool Math Games</a> 
<a href="https://www.youtube.com/" target="_blank">Youtube</a>
</nav>
<br>
<aside>
<h2>Sections</h2>
<ul>
<li><a href="#top">Top</a></li>
<li><a href="#bottom">Bottom</a></li>
</ul>
</aside>
<section>
<p id="lorem">
I need this to be a long section so I can scroll. Enjoy some lorem ipsum.<br>
Lorem ipsum dolor sit amet. Est placeat quae eos nemo molestiae ut dolorum repellendus et magnam velit sed consequatur assumenda hic cumque molestiae. Est laudantium
eius et exercitationem eligendi sed labore fugiat sed porro officiis rem laudantium pariatur. Est iure autem quo assumenda quod quo suscipit minima est expedita magni
et distinctio dolores qui quae natus. Est expedita quasi ab expedita magnam aut facilis rerum est atque eveniet vel esse voluptatem. Ut error eos fugit commodi est
exercitationem ratione non magnam atque et delectus quia sed explicabo libero. Eos assumenda consectetur vel doloremque nobis a voluptatem distinctio ut ipsam earum non
quibusdam expedita non sint nemo est laudantium aspernatur! Non delectus repellendus qui corporis neque qui ducimus soluta ut explicabo quod. Non quisquam
exercitationem cum suscipit Quis qui sunt accusantium et nesciunt temporibus. Et nihil nostrum ea molestiae vitae sed voluptates voluptas aut autem magnam est
rerum adipisci et veritatis consequatur. Qui necessitatibus debitis id labore corrupti aut pariatur officiis aut esse minus id voluptatem illo ab molestiae pariatur? 33
ullam nobis sed fuga ipsam ut maiores odit 33 ipsum maxime. Et enim totam qui fugiat rerum ut corrupti voluptatem aut laborum ullam ut harum fugiat. Eum ipsam placeat
et animi doloremque et magni eveniet sit omnis odit. Qui officiis tempore in animi vitae sit maxime dolore sit incidunt natus sit omnis recusandae. Ut eius repellendus
ut rerum voluptate sit atque quod aut omnis sapiente. 33 distinctio pariatur et dolorem beatae et sunt consequatur. Aut odio doloremque id consequatur aspernatur et
sunt molestiae sed aliquam earum ab quam veritatis hic odio nulla. Qui quod nihil sed rerum magni ab rerum minima eum deleniti facilis! Aut quia nemo in officia nisi et
Quis laborum. Qui autem quibusdam qui quia molestiae aut dolorum voluptatem non voluptatem quam sed voluptatem quam ut deleniti labore non eaque modi. Nam beatae
totam et aperiam sunt 33 quam quas sit quia internos aut rerum omnis. Et magnam facere qui itaque corrupti id reprehenderit iure sit laborum ipsam eum animi magnam ut
inventore dolorum non saepe temporibus. Non veniam delectus qui sunt iste a repudiandae nostrum. Non inventore quibusdam non itaque velit non esse voluptatem id natus
quia et fuga enim id saepe voluptatem eos culpa nulla? Quo quam harum non perferendis illo eum ullam quia est dolore amet aut atque culpa. Et assumenda nostrum est
alias molestiae exercitationem asperiores eos doloribus tempore ut provident amet ad ipsa sint. Et consequuntur unde et praesentium ipsa sed facere aperiam. Non
obcaecati internos cum numquam sunt sit voluptas voluptatem non blanditiis nostrum id eligendi soluta aut atque ratione et earum quam. Est dicta Quis vel doloribus
debitis eos quae minus quo praesentium consequatur. Qui eius nobis ut voluptate aspernatur et asperiores placeat et quidem illum sit pariatur dolores ut Quis harum ut
culpa<span id="bottom"> voluptas.</span>
</p>
</section>
</body>
</html>
CSS:
body{
background-color: black;
color: white;
}
h1{
background-color: gray;
padding: 5px;
color: #EAD94C;
text-align: center;
font-size: 60px;
outline: 40px solid gray;
}
nav{
background-color: gray;
color: #5D2E8C;
font-size: 20px;
outline: 8px solid gray;
text-align: center;
}
aside{
padding: 20px;
border: thin solid white;
margin-bottom: 1000px;
position: fixed;
left: 90%;
}
section{
font-size: 25px;
}
#lorem{
max-width:88%;
padding-left: 5px;
}
Any help is appreciated.
CodePudding user response：
Change your aside style to this:
aside{
padding: 20px;
border: thin solid white;
margin-bottom: 1000px;
position: fixed;
right: 30px;
}
It is a quick fix but if you want your website response you have to restructure a lot.
CodePudding user response：
Remove left: 90%; and add right: 0; so the element gonna be fixed on the right place add z-index: 1000; so the element gonna be on the top of all others element.
aside{
padding: 20px;
border: thin solid white;
margin-bottom: 1000px;
position: fixed;
right: 0;
z-index: 1000;
background-color: black;
}