In CSS, margin and overflow not working

Question

I am new to CSS. I am building a webpage that will have 3 columns - the left one for navigation, the middle one for page content and the right one for external links and notes. First when I went with width in percentage, the overflow was working. Now the overflow is not working as well as the right border got disappeared. Here is my code. Please help me out. Thanks in advance.

//Total pixels: 1366px. (I found this after running a given code on www.w3schools.com).

#rightcontentborder {
    border: 2px solid;
    padding: 5px;
/*  border-radius: 1em;*/

//Left-margin = 1366 - 716 = 650px.
    margin-left: 650px;         
    margin-right:1366px;        

//  width:50px;
    height:700px;
//  overflow:scroll;
    float: right;
    position: absolute;
}

#maincontentborder {
    border: 2px solid;
    padding: 5px;
//  background: #dddddd;

    margin-left: 216px;         
//Given width=500px.
//Right-margin = 1366 - (216+500) = 1366-716 = 650px.
    margin-right: 650px;        

//  width: 100px;
    height: 700px;

    overflow: scroll;
//  float: center;
}

#leftcontentborder {
    border: 2px solid;
    padding: 5px;
//  background: #dddddd;
/*  border-radius: 1em;*/

    margin-left:0px;        /*I have added this line to adjust the left margin of the LEFT content*/
    margin-right:1150px;    /*I have added this line to adjust the right margin of the LEFT content*/
//Width = 1366-1150 = 216px.

    height:700px;

//  float: left;
    position: absolute;
}

Answer 1

If I got your requirement accurately, you need 3 column page. The css is not accurate you have written. You have to use float for achive this. Lets see the expected html

<div class="container">
    <div class="left-content">
        <!-- left sidebar content --> 
    </div>
    <div class="main-content">
        <!-- main content -->
    </div>
    <div class="right-content">
        <!-- right sidebar content -->
    </div>
</div>

Lets assume that the widths of the divs are 300px, 600px and 300px relative to left, main and right.

.container {
    overflow: hidden;
    width: 100%;
    max-width: 1200px; 
}

.left-content {
    width: 25%;
    max-width: 300px;
    float: left;
    min-height: 700px;
}

.right-content {
    width: 25%;
    max-width: 300px;
    float: left;
    min-height: 700px;
}
.main-content {
    width: 50%;
    max-width: 600px;
    float: left;
    min-height: 700px;
}

Try to understand the usage of css relative to the html. And customize with your dimensions. good luck.