left and right sidebars overlapping main content using position:fixed-CodePudding

I'm new to CSS. trying to study some layouts and ran into this issue. in HTML. I've got

        <div id="wrapper"> 
            <aside id="sidebar" >
            </aside>   
            <div >
                Lorem ipsum blah blah (cutted: about 100lines)
            </div>
    
            <aside id="sidebar" >
            </aside>   
        </div>

I'm trying to prevent the left and right sidebar(aside) from scrolling. No matter how much I scroll the main, it will always stay there; I've set its position to fixed and it looked all fine. the issue is, the main content is overlapping with the right sidebar(aside) when resizing. I've tried position: relative and absolute to the right and changing it to div but nothing happens. the goal is - when my chrome browser shrinks, it should show the Horizontal/vertical scrollbars without any overlapping of main contents. no matter how long my main content is, the sidebars should always be there! Thank you in advance! CSS below

body, html {
    font-family: Helvetica;
    background-color: rgba(0, 0, 0);
}
#sidebar {
    position: fixed;
    width: 400px;
    height: 100%;
    margin-top: 120px;
    top: 0;
}
.left {
    left: 0;
    bottom: 0;
    background-color: rgb(82, 50, 50);
}
.content {
    display: inline-block;
    background-color: rgb(255, 255, 255);
    margin-top: 120px;
    top: 0;
    width: 800px;
    height:100%;
    margin-left: 400px;
    margin-right: 400px;
}
.right {
    right: 0;
    bottom: 0;
    background-color: rgb(255, 217, 0);
}

#wrapper {
    margin-left:0;
    margin-right:0;
    max-width: 1600px;
    border:1px solid white;
}

CodePudding user response：

You need to give the .content a dynamic width instead of the static one you've set. Try this

.content {
    width: calc(100% - 400px - 400px); /* where 400px and 400px are the width of the sidebars */
}

CodePudding user response：

The problem is you are using position: fixed and you are using px:

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

By using the px, the element size will always be 400px even though the window size is very small. To prevent the content from overlapping to others and keep the same ratio with other elements, you should use % which is the percentage for the container's size and it will keep the same ratio between the aside and div no matter the window size.

Another soluation is to you media screen

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Check more here

If you want to prevent aside from scrolling, just use:

aside{
overflow: hideen
}