2 боковых панели - по одной на каждой стороне контента

Question

Я знаю, что это часто задаваемый вопрос, но почему-то ничего из того, что я пробовал, не работало на других постах Stackoverflow. Я пытаюсь разместить на своем веб-сайте две боковые панели, по одной на каждой стороне основного контента.

Я пытался использовать float right и float left. Блок против встроенного блока и т. Д. Я не уверен, должно ли плавать основное содержимое или нет. Я использую последний браузер Google Chrome.

HTML:

<!-- Main Page Contents -->
<div id="contents">
    <div id="sidebar">
        <a href="link1.php"><div><p>link 1</p></div></a>
   </div>

    <div id="sidebar2">
        <a href="link2.php"><div><p>link 2</p></div></a>
    </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;
}

Обе боковые панели отображаются с левой стороны в одинаковом положении. Лучшее, что я получил, это то, что sidebar2 всплывает справа от боковой панели, а содержимое всплывает справа.

Answer 1

ваш код почти верен, просто удалите позицию: исправьте и укажите правильную ширину, учитывая ваш экран как 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">
        <a href="link1.php"><div><p>link 1</p></div></a>
   </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">
        <a href="link2.php"><div><p>link 2</p></div></a>
    </div>


</div>

Answer 2

Вы можете сделать это, используя flexbox Вот рабочая скрипка:

а также я удалил ненужные 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">
        <a href="link1.php"><div><p>link 1</p></div></a>
   </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">
        <a href="link2.php"><div><p>link 2</p></div></a>
    </div>
</div>

Примечание : в html и css есть ошибки, которые я исправил: