-3

I want to create a website in HTML.

To do this, the page should first be divided vertically into two parts. In it I would like to display different posts (imagine it like a twitter post). In addition, however, each half should be independently scrollable. If I scroll through the left side, the right side should stay exactly how it is.

Thank you

GeSie
  • 9
  • 4

1 Answers1

0

Your question is a bit ambiguous, it would make sense to elaborate. I will answer the question the way I interpret it.

To split your website into two parts which are independently scrollable, I would use two sections which each take up half of the screen. The content of the website would exist inside these two sections.

To make the sections scrollable, you can use overflow-y: auto. This means that if the content of the sections does not fit (meaning it takes more than half a page), it will not be displayed outside the section, but instead be accessible through a scroll bar.

Below you find a sample implementation.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Split Site</title>
    <!-- everything above here is boilerplate code and not further relevant -->
    <style>
        body {
            display: flex; /* prevents weird whitespace issues */
            margin: 0; /* makes the website take up the whole window */
        }

        section {
            display: inline-block; /* inline: allows multiple side by side. block: allows for more complex styling */
            width: 50%; /* make each section have a width of 50% of the window */
            height: 100vh; /* make the sections take up 100% of the vertical height of the window */
            overflow-y: auto; /* if the content of a section does not fit, the section will be scrollable vertically (on the y axis) */
            /* the following css is irrelevant styling */
            font-size: 20vmin;
            word-wrap: break-word;
        }

        section:nth-child(1) {
            background-color: yellow;
        }
        section:nth-child(2) {
            background-color: beige;
        }
    </style>
</head>
<body>
    <!-- the two sections and their content (the posts would be where the lorem ipsum text currently is)-->
    <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, tenetur?
    </section>
    <section>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, earum!
    </section>
</body>
</html>
dtpnftscdsatp
  • 273
  • 1
  • 11
  • Thank you! That is exactly what I wanted. I got one additional question. How can I add something above those two columns? Like a static Navbar. I am not sure where to put it in the HTML code. – GeSie Mar 06 '22 at 17:35
  • If you want the navbar to be above the sections, you should put the html for the navbar above the html for the sections. ```
    ``` The sections will still take up the whole screen, as defined by ```height: 100vh``` (100% of window height). You'll have to reduce this height and make the navbar accordingly high. You'll also have to make the navbar take up over 50% of the width, so as to make the boxes wrap properly. (Easiest way would be to give the navbar ```display: block```.)     – dtpnftscdsatp Mar 06 '22 at 22:09