2 Sidebars - one on each side of content - html

Question

I know this is a commonly answered question, but for some reason nothing I've tried has worked from the other Stackoverflow posts. I'm trying to have two sidebars on my website with one on each side of the main content.
I've tried using float right and float left. Block vs. inline-block etc... I'm not sure whether the the main contents should float or not. I'm using the latest google chrome browser.
HTML:
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
<div id="mainContents">
<div class="center-div" style="width: 700px;">
<h1">This is some content</h1>
</div>
<div class="center-div" style="width: 900px;">
<h1>More content</h1>
</div>
</div>
</div>
CSS:
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}
#sidebar {
position: fixed;
float: left;
width: 200;
margin: 5px;
margin-left: 15px;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#sidebar2 {
position: fixed;
float: right;
width: 50px;
margin: 5px;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#mainContents {
float: right;
width: calc(100% - 300px);
margin: 0px;
padding: 5px;
padding-top: 20px;
}
Both the sidebars appear on the left side in the same position. The best I've gotten is the sidebar2 floats right of the sidebar and the contents float right of that.

Answer 1

You can do this using flexbox here is the working fiddle:
and also i have removed unnecessary css.
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
display:flex;
}
#sidebar {
width: 20%;
margin: 5px;
padding: 5px;
margin-top: 20px;
}
#sidebar2 {
width: 20%;
padding: 5px;
margin-top: 20px;
}
#mainContents {
width: 60%;
margin: 0px;
padding-top: 20px;
}
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="mainContents">
<div class="center-div">
<h1>This is some content</h1>
</div>
<div class="center-div" >
<h1>More content</h1>
</div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
</div>
Note: there is mistakes in html and css which i have corrected:

Answer 2

your code is almost correct just remove position:fixed and give proper width considering your screen as 100%
.center-div
{
margin: 0 auto;
padding: 15px;
background-color: red;
}
#contents {
overflow: auto;
margin: auto;
margin-bottom: 10px;
width: 100%;
}
#sidebar {
float: left;
width: 15%;
margin:1%;
padding: 5px;
margin-top: 20px;
}
#sidebar2 {
float:right;
width: 15%;
margin: 1%;
padding: 5px;
top: 46px;
margin-top: 20px;
}
#mainContents {
float: left;
width:59%;
margin: 0px;
padding: 5px;
padding-top: 20px;
}
<!-- Main Page Contents -->
<div id="contents">
<div id="sidebar">
<div><p>link 1</p></div>
</div>
<div id="mainContents">
<div class="center-div" >
<h1>This is some content</h1>
</div>
<div class="center-div" >
<h1>More content</h1>
</div>
</div>
<div id="sidebar2">
<div><p>link 2</p></div>
</div>
</div>